Como começar com a pilha Mern

Mern Stack é um conjunto de tecnologias confiáveis ​​e poderosas que podem ser utilizadas para o desenvolvimento de aplicativos da Web escalonáveis. Este aplicativo da web compreende um front-end, back-end e banco de dados para armazenar os dados. É uma estrutura JavaScript de pilha completa usada para criar sites e aplicativos fáceis de usar.

Para começar com a pilha Mern, precisamos fazer o seguinte, configurar o servidor Node, criar um banco de dados MongoDB e estabelecer uma conexão com o servidor de nó. O terceiro e o passo mais importante é construir o React front-end.Aplicação JS. Este artigo mostrará como executar todas essas operações. Antes de avançar, vamos discutir os componentes mencionados da pilha Mern.

Componentes da pilha Mern

• JS é considerado o nível superior no desenvolvimento da pilha Mern. É um declarativo Estrutura JavaScript usado para desenvolver aplicativos dinâmicos do lado do cliente. Ele também permite criar interfaces complexas, conectando os componentes de seus dados do servidor de back -end e depois renderizá -los como HTML. O React também se destaca em lidar com interfaces orientadas a dados e com estado com código mínimo e outras funcionalidades, como manipulação de erros, listas, formas, eventos, que você espera de uma estrutura da web moderna.
• Se você deseja desenvolver um aplicativo com base em Mern Stack Isso salva qualquer forma de dados como eventos, comentários, perfis de usuário, conteúdo e uploads, você precisará de um banco de dados simples para usar com o front-end e o back-end. Esta é a situação onde MongoDB entra em jogo. No react.JS front -end, os documentos JSON criados são enviados para o Express.JS e o nó.Servidor JS, processando -os e armazenando -os no banco de dados MongoDB.
• Em Desenvolvimento da pilha Mern, O nível que está presente entre o banco de dados MongoDB e o React.JS Front-end é o “JS”. Pode ser descrito como uma estrutura minimalista, poucopinionada e rápida da web para o nó.JS. Expressar.O JS Framework opera o nó.servidor js dentro dele. Você pode se conectar ao expresso.JS funciona do seu front-end do seu aplicativo enviando as solicitações de postagens, recebimentos ou http. Essas funções especificadas são então utilizadas para alterar ou acessar os dados do MongoDB por meio de promessas ou retornos de chamada. Expressar.O JS também oferece modelos poderosos para lidar com respostas HTTP, solicitações e roteamento de URL.

Agora, vamos começar com a pilha Mern!

Como configurar o servidor Node no desenvolvimento da pilha Mern

Para configurar o servidor Node no desenvolvimento da pilha Mern, a primeira coisa que você precisa fazer é baixar o nó.JS em seu sistema através do site oficial:

Em seguida, use o arquivo baixado para concluir a instalação do nó.JS e depois de concluir a operação especificada, execute o abaixo-dado em seu prompt de comando:

> nó -v

O acima mencionado “nó”Comando com o“-v”A opção imprimirá a versão atual do“Nó.JS”Que está instalado em seu sistema:

Depois de instalar o nó.JS, seguiremos em direção ao procedimento de desenvolvimento do servidor. Para esse fim, em primeiro lugar, criaremos uma pasta base e, em seguida, instalaremos todos os pacotes ou dependências necessários para o desenvolvimento do Node Server.

Para a operação especificada, você pode usar também o prompt de comando. No entanto, utilizaremos o “Código do Visual Studio”Terminal, que também facilitará o trabalho nos arquivos do servidor Node.

Na próxima etapa, abriremos nossa pasta base usando o “Pasta abertaOpção do “Arquivo" cardápio:

Nós selecionamos o “Funcionário-Mern-ProjetoPasta para armazenar os arquivos relacionados ao servidor de nó da pilha Mern:

Agora, pressione “Ctrl+Shift+'”Para abrir uma nova janela de terminal no código do Visual Studio. Você também pode utilizar o menu "terminal" para esse fim:

Na próxima etapa, criaremos um “Processo internoPasta dentro de nossa “Funcionário-Mern-ProjetoPasta raiz ou base. Para fazer o mesmo, você pode executar o "mkdir”Comando no terminal aberto:

> back -end mkdir

Depois de fazer isso, iremos para o recém -criado “Processo internoPasta para adicionar o arquivo e os pacotes relacionados ao servidor:

> back -end do CD

Dentro do “Processo interno”Pasta, agora criaremos um“pacote.JSON" arquivo. O pacote.O arquivo JSON é o elemento principal de um servidor de nó no desenvolvimento da pilha Mern. Compreende os metadados do seu projeto Mern Stack e também define os atributos funcionais que podem ser utilizados pelo NPM para executar scripts e instalar dependências.

Para criar um novo pacote.Arquivo JSON Para o seu servidor Node, digite o seguinte comando:

> npm init -y

Como instalar dependências para o Node Server no desenvolvimento de pilhas MERN

Esta seção demonstrará o procedimento de instalação de dependências essenciais como “expressar","cors","mangusto", e "dotenv”Para o seu servidor de nó no desenvolvimento da pilha Mern. O gerenciador de pacotes de nó ou “npm”Pode ser usado para instalar as dependências especificadas da seguinte maneira:

> NPM Install Express cors Mongoose dotenv

Aqui:

• "Express" é adicionado para instalar "Express", que é uma estrutura leve da Web para o nó.JS. Ele também tem a capacidade de apoiar muitos meios de idade que ajudam a tornar o código mais fácil e mais curto de escrever.
• "CORS" é um acrônimo para compartilhamento de recursos de origem cruzada. Este pacote permite solicitações de AJAX para acessar os recursos dos hosts remotos.
• "Mongoose" é adicionado para instalar o pacote "Mongoose". O pacote Mongoose ajuda o servidor do nó a interagir com o MongoDB no desenvolvimento da pilha Mern.
• Por fim, o pacote "dotenv" carregará as variáveis ​​de ambiente do ".Env "para o" processo.arquivo Env ”. Ele também gerencia as credenciais de banco de dados em um ambiente colaborativo.

Para o nosso Node Server, outro pacote que vamos instalar é “Nodemon”. Ele reinicia automaticamente o aplicativo Node quando você fez algumas alterações no arquivo enquanto desenvolve o nó.Aplicativo baseado em JS:

> sudo npm install -g nodemon

Como executar o servidor Node no desenvolvimento da pilha Mern

Até este ponto, instalamos o nó.JS e os pacotes e dependências necessários. Agora é hora de criar e executar o nó de back -end.servidor js. Para fazer isso, clique no “Processo interno”Pasta e, no menu suspenso, selecione o“Novo arquivo”Opção:

Aqui, você pode um novo “servidor.JS”O arquivo JavaScript é adicionado na pasta de back -end:

Agora, no “servidor.JS”Arquivo, criaremos um“expressar”Servidor, então anexaremos o“expressar.JSON”Middleware e“cors”. O "expressar.JSON”Middleware será usado para enviar e receber“ JSON ”. Além disso, o nó.O servidor JS poderá ouvir o “5000”Port:

const express = requer ('express');
const cors = requer ('cors');
requer ('dotenv').config ();
const app = express ();
const porta = processo.Env.Porta || 5000;
aplicativo.uso (cors ());
aplicativo.use (expresso.json ());
aplicativo.Ouça (porta, () =>
console.log ('servidor está em execução na porta: $ porta');
);

Depois de adicionar o código acima do dado no “servidor.JS“Arquivo, pressione“Ctrl+s”Para salvar as alterações e depois executar o servidor do nó usando“Nodemon”:

> Nodemon Server

Da saída, você pode ver que nosso servidor está em execução com sucesso na porta “5000”:

Depois de executar com sucesso o nó.Servidor JS na porta especificada, avise em direção ao processo de conectar o nó.Servidor JS para o banco de dados MongoDB. Para isso, você precisa criar uma conta do MongoDB primeiro.

Como criar um banco de dados MongoDB no desenvolvimento da pilha Mern

No desenvolvimento da pilha Mern, ter uma conta de banco de dados MongoDB é uma obrigação. Criar uma conta MongoDB permite que você construa um banco de dados de acordo com seus requisitos. Depois disso, você pode adicionar um “Conjunto”Para o banco de dados recém -criado e gerar uma string de conexão, que o ajudará a conectar o nó.Servidor JS para o banco de dados MongoDB. Então, vamos iniciar este procedimento, movendo -se em direção ao site oficial do MongoDB:

Agora, crie uma conta para hospedar o banco de dados no “Atlas MongoDB”:

Você verá o painel abaixo do dado após a criação de conta do MongoDB. Agora, clique no “Novo projeto”Botão localizado no lado direito do painel:

No campo de entrada destacado, insira o nome do projeto do MongoDB e clique no “Próximo" botão:

Neste ponto, seu projeto MongoDB é criado e todos estão prontos para criar um novo banco de dados:

Na próxima etapa, selecione o provedor e a zona para o seu banco de dados. Por exemplo, selecionamos “Google Cloud”Como provedor de nuvem e“Lowa”Como nossa região. Também é recomendável escolher uma camada gratuita que seja ótima para um ambiente de sandbox.

Depois de selecionar as opções necessárias, clique no “Criar cluster”Botão para avançar:

Para manter a segurança do MongoDB, escolha uma opção entre “Usuário e senha" e "Certificado”Para autenticar a conexão de ou para o nó.JS. No nosso caso, adicionamos o nome de usuário e a senha:

Agora, adicione seus endereços IP à lista de permissões MongoDB. Esta opção permitirá que o endereço IP configurado acesse os clusters do projeto:

Depois de configurar o endereço IP, clique no “Termine e feche" botão:

Dentro de alguns minutos, o cluster criado do seu projeto MongoDB será provisionado:

Como gerar uma string mongodb para conectar o nó.servidor JS no desenvolvimento da pilha Mern

Depois de configurar o “Funcionário-Mern-Projeto”Banco de dados e o recém -criado“Cluster0", vou ao "Implantações de banco de dadosSeção e selecione o cluster. Depois de fazer isso, clique no “Conectar”Botão que é destacado na imagem abaixo:

Então, você será solicitado a escolher o método de conexão para cluster0. Queremos conectar nosso nó.Servidor JS para o banco de dados MongoDB no desenvolvimento de aplicativos de pilha MERN, por isso iremos com o “Conecte seu aplicativo”Opções:

Em seguida, selecione o “MOTORISTA" e os seus "VERSÃO”E então copie a sequência de conexão da parte inferior da janela:

Como conectar o nó.JS Server para MongoDB Banco de dados no desenvolvimento de pilhas MERN

No desenvolvimento da pilha Mern, para conectar o nó.JS e o banco de dados MongoDB, usaremos a sequência de conexão, na qual copiamos do “Conecte -se ao cluster0" janela. Para fazer isso, abra o nó.js “servidor.JS”Arquivo e verifique se o servidor está em execução:

> servidor nodeman

Na próxima etapa, adicionaremos “mangusto" biblioteca. O "mangusto" Nó.A biblioteca JS ajuda a estabelecer uma conexão entre o cluster do MongoDB e o nó.servidor JS:

const Mongoose = requer ('Mongoose');

Agora, criaremos um separado “.Env”Arquivo para armazenar o Atlas MongoDB“Uri" ou o "String de conexão”. Para esse fim, clique no nó.Pasta do servidor JS que é “Processo interno"No nosso caso, e depois cria um"Novo arquivo”:

Nomeamos o novo arquivo como ".Env”:

Se você não possui a sequência de conexão, copie -a da seção destacada:

Em seguida, adicione a sequência de conexão copiada como “Atlas_uri" no ".Env" arquivo:

Atlas_URI = MongoDB+Srv: // Linuxhint:@cluster0.8JDC7.MongoDB.net/myfirstdatabase?RETRYWRITES = TRUE & W = MAIORIDADE

No adicionado “Atlas_uri”Especifique seu nome de usuário e senha do MongoDB e pressione“Ctrl+s”Para salvar as alterações adicionais:

Agora, adicione o seguinte código em seu nó.js “servidor" arquivo:

const Uri = Processo.Env.Atlas_uri;
mangusto.conectar (URI);
const Connection = Mongoose.conexão;
conexão.uma vez ('aberto', () =>
console.log ("conexão de banco de dados MongoDB estabelecida com sucesso");
)

O código adicionado tentará se conectar com o “Atlas MongoDB" usando "mangusto”Biblioteca e Altas_uri e, se a conexão for estabelecida, ela imprimirá“Conexão de banco de dados MongoDB estabelecida com sucesso”Na janela do terminal:

Imprensa "Ctrl+s”Para salvar as mudanças adicionais e depois executar seu nó.servidor JS:

> Nodemon Server

A saída abaixo do rumo declara que conectamos com sucesso nosso nó.Servidor JS para o banco de dados MongoDB no desenvolvimento da pilha Mern:

Agora, vamos verificar o método de configurar o React.JS no lado do cliente em desenvolvimento de pilhas Mern.

Como configurar o React.JS no lado do cliente em desenvolvimento de pilhas Mern

Para configurar o React.JS no lado do cliente em Mern Stack Development, a primeira coisa que você precisa fazer é selecionar um diretório para a instalação do React.Projeto baseado em JS. Você pode usar o “Prompt de comando”Para esse fim. No entanto, utilizaremos o “Código do Visual Studio”Terminal que também facilitará operar com o React.Aplicação JS.

Para fazer isso em primeiro lugar, procuraremos o “Código do Visual Studio”Aplicação e abra:

No aplicativo aberto, clique no “Arquivo”Opção da barra de menus e selecione o“Pasta aberta”Opção:

Agora, navegue pela pasta onde você deseja colocar seu reagir.Arquivo relacionado ao aplicativo JS. No nosso caso, selecionamos o “Funcionário-Mern-ProjetoPasta, presente na “Disco local (e :)”:

Em seguida, pressione “Ctrl+Shift+'”Para abrir o terminal de código do Visual Studio. Você também pode executar a operação especificada com a ajuda do menu "terminal":

Neste ponto, estamos todos prontos para configurar o React.Aplicação JS no desenvolvimento da pilha Mern. A execução do “npx”Comando com o“Criar-react-app”A opção ajuda você a criar um reagir.Aplicação JS. Por exemplo, o abaixo foi dado “npx"Comando criará um"Mern-EMSYSTEM" Reagir.Aplicativo JS que terá todas as dependências necessárias em sua pasta do projeto:

> NPX CREATE-REACT-APP MERN-EMSYSTEM

Aguarde alguns minutos, pois a instalação dos pacotes levará algum tempo:

A saída livre de erros abaixo indica que instalamos com sucesso o “Mern-EMSYSTEM" Reagir.Aplicativo JS:

O código do Visual Studio carregará automaticamente a pasta de aplicação ReactJS. Agora, faremos algumas mudanças no “índice.html”Arquivo do“Mern-EMSYSTEM" Reagir.Aplicativo JS:

O "índice.html”Arquivo do seu reagem.O aplicativo JS será de alguma forma assim:

Aqui, "React app"Está representando o"título" nosso "Mern-EMSYSTEM" aplicativo:

Vamos utilizar o reagir criado.Aplicativo JS para o desenvolvimento de um sistema de gerenciamento de funcionários com Mern Stack. Então, em primeiro lugar, mudaremos o título de nosso “Mern-EMSYSTEM" Reagir.Aplicativo JS para “Sistema de gerenciamento de funcionários”E salve o aberto“índice.html" arquivo:

Na próxima etapa, mudaremos o diretório de trabalho atual para “Mern-EMSYSTEM”Usando o terminal:

> CD MERN-EMSYSTEM

Agora, escreva os abaixo-goldados “npm”Comando para iniciar o desenvolvimento do servidor da web:

> NPM START

Como você pode ver na saída que “Mern-EMSYSTEM”O projeto é compilado com sucesso e pronto para visualizar no navegador:

Digitando o “LocalHost: 3000”Na barra de endereço do nosso navegador, veremos a seguinte interface para o“Mern-EMSYSTEM" Reagir.Aplicativo JS:

Você também pode adicionar alteração o conteúdo do “Aplicativo.JS”Arquivo JavaScript para manusear ou visualizar os componentes do seu aplicativo React:

Por exemplo, adicionando o seguinte código em nosso “Aplicativo.JS”O arquivo salvará o“Sistema de gerenciamento de funcionários”Conteúdo dentro de um contêiner:

importar './Aplicativo.CSS ';
função app ()
retornar (

Sistema de gerenciamento de funcionários

);

exportar aplicativo padrão;

A partir da imagem abaixo, você pode ver que o adicionado “Sistema de gerenciamento de funcionários”Conteúdo para o nosso reagir.O aplicativo JS é exibido com sucesso:

Isso foi tudo sobre o procedimento de configuração de reação.Aplicativo JS no lado do cliente no desenvolvimento da pilha Mern. Você pode fazer mais personalização de acordo com seus requisitos.

Conclusão

Mern Stack é uma poderosa estrutura de aplicativos da web usada para criar sites e aplicativos modernos. Compreende o React.JS para desenvolver o front-end, Express e Node.JS para criar o banco de dados de back -end e MongoDB para manter o banco de dados. Este artigo demonstrou como começar com a pilha Mern. Cada procedimento é fornecido, desde a criação do reagir.Aplicativo JS e Nó.JS Server para conectar o servidor com o banco de dados MongoDB.