- Backend hospedado: https://nameless-springs-83115.herokuapp.com/
- Frontend (somente o componente): https://profilemaster.netlify.app/
- Frontend injetado ( no meu caso um HTML estático simples): https://profilemaster-injected.netlify.app/
- Aplicação que gera moldura para imagem do profile com os dados vindos do GitHub. Isso poderia ser usado como "ingresso" de um evento, para criar imagens de profiles para redes sociais ou apenas para identifcar pessoas.
- Projeto feito para processo seletivo da App Masters
- Moldura GDG
- Script de injeção em site de terceiros
Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas: Git, Node.js, TypeScript, AWS-CLI instalado e configurado. Além disto é bom ter um editor para trabalhar com o código como VSCode
# Clone este repositório
$ git clone <https://github.com/Vini98br/ProfileMaster>
# Acesse a pasta do projeto no terminal/cmd
$ cd ProfileMaster/server
# Instale as dependências
$ npm install- Antes de executar o projeto crie um arquivo na pasta server do projeto com o nome de
.env, com as seguintes variáveis:
AWS_ACCESS_KEY_ID= Seu id de acessa da AWS
AWS_SECRET_ACCESS_KEY=Seu id secreto da AWS
AWS_BUCKET_NAME=nome do bucket do S3- Obs: Lembrando que o nome do bucket só servirá para o ambiente de dev, visto que, também é necessario configurar as variáveis ambiente no servidor de deploy( ex.: heroku, etc)
# Execute a aplicação em modo de desenvolvimento
$ npm run dev
# O servidor inciará na porta:5000# Clone este repositório
$ git clone <https://github.com/Vini98br/ProfileMaster>
# Acesse a pasta do projeto no terminal/cmd
$ cd ProfileMaster
# Instale as dependências
$ npm install- Antes de executar o projeto crie um arquivo na raiz do projeto com o nome de
.env.development, com as seguintes variáveis (acesse esse link que ensina a criar as 2 primeiras variáveis ambiente:
REACT_APP_CLIENT_ID=Seu Client ID do Github
REACT_APP_CLIENT_SECRET=Seu Client Secret do Github
REACT_APP_REDIRECT_URI=http://localhost:3000/
REACT_APP_PROXY_URL=http://localhost:5000/
SERVER_PORT=5000- Em caso de produção coloque outro arquivo na raiz com o nome de
.env.production:
REACT_APP_CLIENT_ID=Seu Client ID do Github
REACT_APP_CLIENT_SECRET=Seu Client Secret do Github
REACT_APP_REDIRECT_URI=http://profilemaster-injected.netlify.app/ -> frontend hospedado
REACT_APP_PROXY_URL=https://nameless-springs-83115.herokuapp.com/ -> backend hospedado
SERVER_PORT=5000- Após esse passo execute o comando a seguir para iniciar o Front-end:
# Execute a aplicação em modo de desenvolvimento
$ npm start
# O servidor inciará na porta:3000 - acesse <localhost:3000>- Deve ser colocado em meio ao HTML um div com a id igual a
profile-master.<div id="profile-master"></div>
- O mesmo deve ser inserido uma linha antes da tag
</body>.<script type="text/javascript"> (async()=>{fetch("https://nameless-springs-83115.herokuapp.com/files").then(e=>e.clone().json()).then(e=>{var t=document.createElement("script");t.type="text/javascript";var a=document.createElement("script");a.src="https://"+e.bucketName+".s3-sa-east-1.amazonaws.com/webpack.js";var s=document.createElement("script");s.src="https://"+e.bucketName+".s3-sa-east-1.amazonaws.com/static/js/"+e.bundles[0];var c=document.createElement("script");c.src="https://"+e.bucketName+".s3-sa-east-1.amazonaws.com/static/js/"+e.bundles[1],t.appendChild(a),t.appendChild(s),t.appendChild(c),document.body.append(t)})})(); </script>
- Este código pega os arquivos do bucket do s3, os quais foram colocados lá com o comando
npm run build-and-deploy. - Vale ressaltar que o bucket que é usado no script é o mesmo que é configurado nas variáveis ambiente do servidor em que o nodeJS foi hospedado.
