Introdução ao MERN
Neste artigo, eu estaria criando e implantando um aplicativo criado com a pilha MERN no Heroku.
MERN, que significa MongoDB, Express, React e NodeJS, é uma pilha de tecnologia popular usada na criação de aplicativos da Web que envolvem trabalho de front-end (com React), trabalho de back-end (com Express e NodeJS) e um banco de dados (com MongoDB).
O Heroku, por outro lado, é uma plataforma como serviço (PaaS) que permite aos desenvolvedores criar, executar e operar aplicativos inteiramente na nuvem – Documentação
Para este artigo, estaríamos usando o MongoDB Atlas, que é um serviço global de banco de dados em nuvem para aplicativos modernos. Isso é mais seguro que o MongoDB instalado localmente em nosso servidor e também oferece espaço para mais recursos em nossos servidores.
Estaríamos construindo um projeto de reação simples, que faz solicitações de postagem para uma API para adicionar um usuário e também pode fazer solicitações de obtenção para obter todos os usuários.
Você pode pular para qualquer etapa com o índice listado acima.
Você já pode ter um projeto MERN que deve ser implantado no Heroku, mas eu examinaria um pequeno projeto apenas no caso de você não
Nota: Antes de começarmos nosso projeto, node deve estar instalado no seu computador. node também nos fornece npm que é usado para instalar pacotes.
create-react-app é usado para criar um aplicativo de reação inicial.
Se você não tem create-react-app instalado antes, digite o seguinte na linha de comando.
-g flag instala o pacote globalmente.
Criar diretório de projeto
O exemplo acima cria um diretório 'meu-projeto' e instala dependências que seriam usadas no reator inicial. Após o qual o diretório é alterado para o diretório do projeto.
Inicie o projeto e faça as edições necessárias
O exemplo acima inicia o projeto de reação, que fornece uma URL que você visualiza o projeto. Você faz as edições necessárias no projeto, como alterar imagens ou textos.
axios é uma biblioteca javascript usada para fazer solicitações HTTP facilmente. Seria usado para enviar solicitações do front-end (React) para as APIs fornecidas pelo back-end
O back-end gerencia as APIs, manipula solicitações e também se conecta ao banco de dados.
Instalar pacotes de back-end
express: Express é uma estrutura mínima e flexível de aplicativos da Web Node.js. que fornece um conjunto robusto de recursos para aplicativos da Web – Documentação.
cors: CORS é um pacote node.js para fornecer um middleware do Connect / Express que pode ser usado para ativar o CORS com várias opções – Documentação.
mongoose: Mongoose é uma ferramenta de modelagem de objeto MongoDB projetada para funcionar em um ambiente assíncrono. O Mongoose suporta promessas e retornos de chamada – Documentação.
body-parser: Corpo do Node.js que analisa o middleware. – Documentação.
Criar pasta de back-end
Configurar back-end
Criar ponto de entrada server.js
Primeiro, crie um server.js arquivo, que seria o ponto de entrada para o back-end
No server.js, digite o seguinte
express.static entrega arquivos estáticos, o que é construído quando npm run build é executado em um projeto de reação. Lembre-se, o arquivo criado está na pasta de construção.
Em nossa configuração, qualquer solicitação enviada para /api/users será enviado para users API que estamos prestes a configurar
Configurar users api
No touch.js, adicione o seguinte
Acima, criamos um manipulador de solicitação de recebimento e publicação que busca todos os usuários e publica usuários. A busca e inclusão de usuário no banco de dados é auxiliada pelo User modelo criado. Vamos criar o modelo
Crio User modelo
No user.js, adicione o seguinte
Acima, um esquema é criado para o usuário, que contém os campos do usuário. No final do arquivo, o modelo ("Usuário") é exportado com o esquema e a coleção ("usuários")
Conecte o banco de dados do MongoDB Atlas
O MongoDB Atlas é o serviço global de banco de dados em nuvem para aplicativos modernos.
Em primeiro lugar, precisamos nos registrar na nuvem Mongo.
Ir através esta documentação para criar uma conta Atlas e criar seu cluster.
Uma coisa que vale a pena notar é lista branca de seu endereço IP de conexão. Se esta etapa for ignorada, você não terá acesso ao cluster; portanto, preste atenção nessa etapa.
O cluser é um servidor pequeno que gerencia nossas coleções (semelhante às tabelas nos bancos de dados SQL). Para conectar seu back-end ao cluster, crie um arquivo database.js que, como podemos ver, é necessário em server.jse digite o seguinte:
const connection = "mongodb+srv://username:@/?retryWrites=true&w=majority";
No connection variável, insira seu username (para nuvem MongoDB), seu password (senha do cluster), seu cluster (endereço do seu cluster) e o database (nome do seu banco de dados). Tudo isso pode ser facilmente descoberto se você seguiu a documentação
Chamando APIs no frontend
Todas as APIs seriam criadas para localhost:5000 localmente, como configuramos no server.js. Quando implantado no heroku, o servidor usaria a porta fornecida pelo servidor (process.env.PORT)
Para facilitar as coisas, o React nos permite especificar um proxy para o qual as solicitações seriam enviadas.
Aberto package.json e pouco antes da última chave, e adicione o seguinte:
Dessa forma, podemos enviar solicitações diretamente para api/users, e quando nosso site for implantado e construído, a porta padrão do nosso aplicativo será usada com a mesma API.
Aberto App.js para React e adicione o seguinte
if(username === '') {
alert('Please fill the username field');
alert('Please fill the email field');
axios.post('/api/users', {
.then(function() => {
alert('Account created successfully')}
.catch(function() => alert('Could not creat account. Please try again'))
users.length === 0 ? (
useState e useEffect ganchos são usados ​​para lidar com estados e efeitos colaterais. O que está basicamente acontecendo é que o primeiro estado dos usuários é null, e em nulo, 'Carregando …' é exibido no navegador. Em useEffect, [] é usado para especificar que em componentDidMount (quando o componente estiver montado), faça um pedido de axios para a API que está sendo executada no localhost:5000. Se o resultado for obtido e não houver usuário, 'Nenhum usuário disponível' será exibido para o usuário; caso contrário, será exibida uma lista numerada dos usuários.
Se você quiser saber mais sobre useState e useEffect, confira este artigo – O que diabos é React Hooks?
Com o formulário disponível, uma solicitação de postagem pode ser feita para postar um novo usuário. O estado das entradas é controlado e enviado à API em localhost:5000 na submissão. Após as alas, a página é atualizada e o novo usuário é exibido.
Para implantar seu aplicativo no heroku, você deve ter uma conta heroku. Vamos para a página deles para criar uma conta. Então passe a documentação deles sobre como criar um aplicativo heroku. Também confira a documentação no Heroku CLI
Criar aplicativo Heroku
Primeiro, faça o login no heroku:
Isso o redirecionará para um URL no navegador no qual você pode fazer login e, em seguida, pode continuar no terminal.
No mesmo diretório de projeto de reação, execute o seguinte:
O Tnis criaria um aplicativo heroku e também forneceria o URL para acessar o aplicativo.
Configurar package.json
O Heroku usa o arquivo package.json para saber quais scripts executar e as dependências a serem instaladas para que seu projeto seja executado com êxito.
No seu package.json, adicione o seguinte:
Pelo exposto, o heroku executa uma compilação posterior que, como você pode ver, instala suas dependências e executa uma compilação do seu projeto de reação. Em seguida, inicia seu projeto com o start script que basicamente inicia seu servidor. E seu projeto funciona bem.
engines especifica as versões de mecanismos como node e npm a serem instalados.
Empurre para Heroku
Isso envia seus códigos para o heroku. Lembre-se de incluir os arquivos necessários .gitignore.
Após alguns segundos, seu site está pronto. Se houver algum erro, você poderá verificar se há resultados no terminal depois de empurrar ou acessar o painel no navegador para visualizar os logs de compilação.
Agora você pode visualizar seu site no URL enviado pelo heroku quando heroku create foi executado.
Isso é tudo o que há neste artigo. Que bom que você leu até aqui.
Obviamente, existem mais aplicativos de pilha MERN.
Este artigo não foi tão profundo quanto autenticações, logon, sessões e tudo mais, mas apenas para facilitar a implantação de aplicativos de pilha MERN no heroku e o trabalho com o MongoDB Atlas.
Este artigo foi originalmente publicado no meu blog – dillionmegida.com
Posted in Tecnologia • No Comments on Implantando um aplicativo MERN usando o MongoDB Atlas no Heroku