O projeto está inativo

Aplicação Fullstack em Node.js e React: Fórum temático para Game of Thrones

Este projeto apresenta um fórum definido por duas aplicações, back-end e front-end, que implementam autenticação via método JWT. No back-end foi usado Node.js com Express.js e um banco de dados MySQL. O front-end é feito em React com Redux.

27

Primeiros Passos

Destaques do projeto

  • React
  • Redux
  • Node.js
  • Express.js

Clonando o projeto a partir do GitHub

Para clonar o repositório deste projeto a partir do GitHub você precisa ter o GIT instalado em seu computador.

Caso você esteja em um ambiente Windows, vá até a página https://git-scm.com/download/win, faça o download do instalador do GIT e prossiga com a instalação.

Após isso, abra o prompt de comandos para executar o seguinte:

A EXIBIÇÃO DESTE CONTEÚDO FOI INTERROMPIDAEste post está disponível para assinantesSaiba mais

Fazendo o deploy da aplicação no Heroku

Para enviar o seu projeto para o Heroku e publicar a sua aplicação você deve ter uma conta criada, além de instalar em seu computador o Heroku CLI. Nas URLs abaixo você conseguirá realizar ambos esses passos:

Acesse o prompt de comandos novamente e vá até o diretório no qual o projeto foi clonado do GitHub:

cd caixa-de-sugestoes

No diretório do projeto digite os seguintes comandos:

heroku login
heroku create
heroku git push heroku master
heroku create
heroku logs --tail

Agora, no projeto back-end, precisamos configurar o banco de dados da aplicação no arquivo config.js, bem como adicionar suporte a um banco de dados no projeto que criamos com o Heroku CLI nos passos acima. Aqui utilizaremos o ClearDB, um addon que possui uma versão gratuita, para instalar o MySQL. Antes de instalar o ClearDB certifique-se de habilitar a cobrança no Heroku, pois essa é uma exigência para a instalação deste addon.

No prompt de comandos execute os seguintes comandos:

heroku addons:create cleardb:ignite
heroku config

O comando heroku config exibirá a URL de conexão com o banco de dados, a partir da qual adicionaremos as variáveis de ambiente necessárias para realizar a conexão com o banco de dados.

CLEARDB_DATABASE_URL: 
    mysql://bbd1ca985a75ae:b3270a98@us-cdbr-iron-east-03.cleardb.net/heroku_eb3ec026f66e354?reconnect=true

Levando em consideração a URL acima, para conectar essa aplicação com o banco de dados heroku_eb3ec026f66e354, devemos clicar na aba "Settings" da dashboard do Heroku. Nessa página clique no botão "Reveal Config Vars", isso irá revelar dois campos para por a chave e o valor da nova variável de ambiente. Em seguida ponha as seguintes variáveis com os valores:

Chave Valor
NODE_ENV production
DB_HOST mysql://bbd1ca985a75ae:b3270a98@us-cdbr-iron-east-03.cleardb.net/heroku_eb3ec026f66e354?reconnect=true
DB_USER bbd1ca985a75ae
DB_PASSWORD b3270a98

Uma vez que cada um desses passos tenha sido executado com sucesso, podemos executar a aplicação com o seguinte comando:

heroku open

Glossário

React

O React é uma biblioteca JavaScript de código aberto para criar interfaces de usuário. É mantido pelo Facebook, Instagram e uma comunidade de desenvolvedores individuais e outras empresas.

Node.js

o Node.js é um ambiente de execução para JavaScript, assíncrono e orientado a eventos de código aberto. O Node.js permite que os desenvolvedores usem JavaScript para escrever scripts do lado do servidor.

Redux

Redux é uma biblioteca JavaScript de código aberto para gerenciar o estado do aplicativo. É mais comumente usado com bibliotecas como React ou Angular para construir interfaces com o usuário. Semelhante à arquitetura Flux do Facebook, foi criado por Dan Abramov e Andrew Clark.

Express.js

Express.js, ou simplesmente Express, é uma estrutura de aplicativo da web para o Node.js, lançada como software livre e de código aberto sob a licença MIT. Ele é projetado para construir aplicativos da Web e APIs. Ele foi chamado de estrutura de servidor padrão de fato para o Node.js.

Saiba mais Veja a Série React com Redux
Suporte ao aluno - Deixe a sua dúvida.
Assinatura Devmedia
Fa?a parte dessa comunidade 100% focada em programação e tenha acesso ilimitado. Nosso compromisso é tornar a sua experiência de estudo cada vez mais dinâmica e eficiente. Portanto, se você quer programar de verdade seu lugar é aqui. Junte-se a mais de...
+ 800 Mil programadores
,90* / mês
  • Séries
  • Projetos completos
  • Cursos
  • Guias de carreiras
  • DevCasts
  • Desafios
  • Artigos
  • App
  • Suporte em tempo real
A assinatura é cobrado através do seu cartão de crédito. *Tempo mínimo de assinatura: 12 meses.
Assinatura Devmedia
Faça parte dessa comunidade 100% focada em programação e tenha acesso ilimitado. Nosso compromisso é tornar a sua experiência de estudo cada vez mais dinâmica e eficiente. Portanto, se você quer programar de verdade seu lugar é aqui. Junte-se a mais de...
+ 800 Mil programadores
Conheça agora!
,90* / mês
  • Séries
  • Projetos completos
  • Cursos
  • Guias de carreiras
  • DevCasts
  • Desafios
  • Artigos
  • App
  • Suporte em tempo real
A assinatura é cobrada através do seu cartão de crédito. *Tempo mínimo de assinatura: 12 meses.