Come iniziare con Mern Stack

Mern Stack è un insieme di tecnologie affidabili e potenti che possono essere utilizzate per lo sviluppo di applicazioni Web scalabili. Questa applicazione Web comprende un front-end, back-end e database per la memorizzazione dei dati. È un framework JavaScript completo utilizzato per creare siti Web e applicazioni intuitivi.

Per iniziare con lo stack Mern, dobbiamo eseguire il seguente thfirstrstly, impostare il server nodo, creare un database MongoDB e stabilire una connessione con il server nodo. Il terzo e il passo più importante è costruire la reazione frontale.Applicazione JS. Questo articolo ti mostrerà come eseguire tutte queste operazioni. Prima di andare avanti, discutiamo dei componenti menzionati dello stack Mern.

Componenti di Mern Stack

• js è considerato il livello superiore nello sviluppo di Mern Stack. È un dichiarativo JavaScript Framework utilizzato per sviluppare applicazioni dinamiche sul lato client. Ti consente inoltre di creare interfacce complesse collegando i componenti dei dati dal server backend e quindi rendendoli come HTML. React eccelle anche nella gestione delle interfacce basate sui dati e statali con codice minimo e altre funzionalità come la gestione degli errori, elenchi, forme, eventi, che ti aspetti da un moderno framework Web.
• Se si desidera sviluppare un'applicazione basata su Mern Stack Ciò salva qualsiasi forma di dati come eventi, commenti, profili utente, contenuti e caricamenti, avrai bisogno di un semplice database da utilizzare con il front-end e il back-end. Questa è la situazione in cui MongodB entra in gioco. Nella reazione.JS Front End, i documenti JSON creati vengono inviati all'Express.js e il nodo.server JS, elaborarli e memorizzarli nel database MongoDB.
• In Sviluppo di Mern Stack, il livello che è presente tra il database MongoDB e la reazione.JS Front-End è il "js". Può essere descritto come un framework web minimalista, non aperto e veloce per il nodo.js. Esprimere.JS Framework gestisce il nodo.server js al suo interno. Puoi connetterti all'Express.JS funziona dal front-end dell'applicazione inviando le richieste di post, ottime o HTTP. Queste funzioni specificate vengono quindi utilizzate per modificare o accedere ai dati MongoDB tramite promesse o callback. Esprimere.JS offre anche potenti modelli per la gestione delle risposte, delle richieste e del routing URL HTTP.

Ora, iniziamo con lo stack Mern!

Come impostare il server nodo nello sviluppo di stack Mern

Per impostare il server nodo nello sviluppo di Mern Stack, la prima cosa che devi fare è scaricare il nodo.JS sul tuo sistema attraverso il suo sito Web ufficiale:

Quindi, utilizzare il file scaricato per completare l'installazione del nodo.JS e dopo aver completato l'operazione specificata, eseguire il seguente dono nel prompt dei comandi:

> nodo -v

Il sopra dato "nodoComando "con il"-v"L'opzione stamperà la versione corrente di"Nodo.js"Che è installato sul tuo sistema:

Dopo aver installato il nodo.JS, andremo avanti verso la procedura di sviluppo del server. A tale scopo, in primo luogo, creeremo una cartella di base e quindi installeremo tutti i pacchetti o le dipendenze richieste per lo sviluppo del server nodo.

Per l'operazione specificata, è possibile utilizzare anche il prompt dei comandi. Tuttavia, utilizzeremo il "Codice Visual Studio"Terminale che renderà anche facile funzionare nei file del server nodo.

Nel prossimo passaggio, apriremo la nostra cartella di base utilizzando "Cartella aperta"Opzione di"File" menù:

Abbiamo selezionato il “Dipendente-merrico-progetto"Cartella per archiviare i file relativi al server nodo dello stack MERN:

Ora, premere "Ctrl+Shift+'”Per aprire una nuova finestra terminale nel codice Visual Studio. Per questo scopo puoi anche utilizzare il menu "terminale":

Nel prossimo passaggio, creeremo un "Backend"Cartella all'interno del nostro"Dipendente-merrico-progetto"Cartella di radice o base. Per fare lo stesso, puoi eseguire il di seguito "mkdir"Comando nel terminale aperto:

> Backend MKDIR

Dopo averlo fatto, ci sposteremo nel nuovo creato "Backend"Cartella per aggiungere il file e i pacchetti relativi al server:

> Backend CD

All'interno del "Backend"Cartella, ora creeremo un"pacchetto.JSON" file. Il pacchetto.Il file JSON è l'elemento principale di un server nodo nello sviluppo di stack Mern. Comprende i metadati del progetto Mern Stack e definisce anche gli attributi funzionali che possono essere quindi utilizzati da NPM per l'esecuzione di script e l'installazione di dipendenze.

Per creare un nuovo pacchetto.File JSON per il tuo server nodo, digita il seguente comando:

> NPM init -y

Come installare dipendenze per il server Node nello sviluppo di stack Mern

Questa sezione dimostrerà la procedura di installazione di dipendenze essenziali come "esprimere","Cor","mangusta", E "Dotenv"Per il tuo server nodo nello sviluppo Mern Stack. Il gestore dei pacchetti nodi o "npm"Può essere utilizzato per l'installazione delle dipendenze specificate nel modo seguente:

> NPM Installa Express Cors Mongoose Dotenv

Qui:

• "Express" viene aggiunto per installare "Express" che è un framework Web leggero per il nodo.js. Ha anche la capacità di supportare molti mediumi che aiutano a rendere il codice più semplice e più breve da scrivere.
• "Cors" è l'acronimo della condivisione delle risorse cross-origine. Questo pacchetto consente alle richieste di Ajax di accedere alle risorse dagli host remoti.
• "Mongoose" viene aggiunto per installare il pacchetto "Mongoose". Il pacchetto Mongoose aiuta il server nodo a interagire con MongoDB nello sviluppo dello stack Mern.
• Infine, il pacchetto "Dotenv" caricherà le variabili di ambiente da ".env "al" processo.File env ". Gestisce inoltre le credenziali del database in un ambiente collaborativo.

Per il nostro server Node, un altro pacchetto che stiamo per installare è "Nodemon". Riavvia automaticamente l'applicazione del nodo quando si sono apportate alcune modifiche nel file durante lo sviluppo del nodo.Applicazione basata su JS:

> Sudo NPM Installa -g nodemon

Come eseguire il server nodo nello sviluppo di stack Mern

Fino a questo punto, abbiamo installato nodo.JS e i pacchetti e le dipendenze richieste. Ora è il momento di creare ed eseguire il nodo backend.server js. Per fare ciò, fai clic su "Backend"Cartella e dal menu a discesa, selezionare il"Nuovo file" opzione:

Qui, puoi un nuovo "server.js"Il file JavaScript viene aggiunto nella cartella back -end:

Ora, nel "server.js"File, creeremo un"esprimere"Server, quindi collegheremo il"esprimere.JSON"Middleware e"Cor". IL "esprimere.JSON"Middleware verrà utilizzato per l'invio e la ricezione di" JSON ". Inoltre, il nodo.Il server JS sarà autorizzato ad ascoltare il "5000"Porta:

const espress = requisito ('express');
const cors = requisito ('cors');
richiedere ('dotenv').config ();
const app = express ();
port const = processo.env.Porta || 5000;
app.usare (cors ());
app.Usa (Express.json ());
app.ascolt (port, () =>
console.log ('Il server è in esecuzione su porta: $ porta');
);

Dopo aver aggiunto il codice di cui sopra in "server.js"File, premere"Ctrl+s"Per salvare le modifiche e quindi eseguire il server nodo utilizzando"Nodemon":

> Server nodemon

Dall'output, puoi vedere che il nostro server è in esecuzione correttamente sulla porta "5000":

Dopo aver eseguito correttamente il nodo.server JS sulla porta specificata, vai avanti verso il processo di collegamento del nodo.server JS nel database MongoDB. Per questo, devi prima creare un account MongoDB.

Come creare il database MongoDB nello sviluppo di Stack Mern

In Mern Stack Development, avere un account di database MongoDB è un must. La creazione di un account MongoDB consente di creare un database in base alle tue esigenze. Dopodiché, puoi aggiungere un "Grappolo"Al database appena creato e generare una stringa di connessione, che ti aiuterà a collegare il nodo.server JS nel database MongoDB. Quindi, iniziamo questa procedura spostandoci verso il sito ufficiale di MongoDB:

Ora, crea un account per l'hosting del database in "Atlante Mongodb":

Vedrai la dashboard di seguito dopo la creazione dell'account MongoDB. Ora, fai clic su "Nuovo progetto"Pulsante che si trova sul lato destro del cruscotto:

Nel campo di input evidenziato, immettere il nome del progetto MongoDB e fare clic su "Prossimo"Pulsante:

A questo punto, viene creato il tuo progetto MongoDB e sei pronto per creare un nuovo database:

Nel passaggio successivo, selezionare il provider e la zona per il tuo database. Ad esempio, abbiamo selezionato "Google Cloud"Come fornitore di cloud e"Lowa"Come la nostra regione. Si consiglia inoltre di scegliere un livello libero che risulta eccezionale per un ambiente Sandbox.

Dopo aver selezionato le opzioni richieste, fare clic su "Crea cluster"Pulsante per andare avanti:

Per mantenere la sicurezza MongoDB, scegli un'opzione tra "Nome utente e password" E "Certificato"Per autentico la connessione da o al nodo.js. Nel nostro caso, abbiamo aggiunto il nome utente e la password:

Ora aggiungi i tuoi indirizzi IP alla whitelist MongoDB. Questa opzione consentirà all'indirizzo IP configurato di accedere ai cluster del progetto:

Dopo aver configurato l'indirizzo IP, fare clic su "Finire e chiudere"Pulsante:

Entro pochi minuti, il cluster creato del progetto MongoDB verrà fornito:

Come generare una stringa mongodb per collegare il nodo.server JS nello sviluppo di stack Mern

Dopo aver impostato il “Dipendente-merrico-progetto"Database e il recente creato"Cluster0", Vai al"Distribuzioni del database"Sezione e selezionare il cluster. Dopo averlo fatto, fai clic su "Collegare"Pulsante che è evidenziato nell'immagine di seguito:

Quindi, ti verrà chiesto di scegliere il metodo di connessione per Cluster0. Vogliamo collegare il nostro nodo.JS Server nel database MongoDB nello sviluppo dell'applicazione Mern Stack, quindi andremo con il “Collega l'applicazione" opzioni:

Successivamente, seleziona il “AUTISTA" e il suo "VERSIONE"E quindi copiare la stringa di connessione dalla parte inferiore della finestra:

Come collegare il nodo.Database JS Server a MongoDB nello sviluppo di Stack Mern

In Mern Stack Development, per collegare il nodo.JS e il database MongoDB, useremo la stringa di connessione, che abbiamo copiato dal "Connettiti a cluster0" finestra. Per farlo, apri il nodo.js "server.js"File e assicurati che il tuo server sia in esecuzione:

> Nodeman Server

Nel prossimo passaggio, aggiungeremo "mangusta" biblioteca. IL "mangusta"Nodo.La libreria JS aiuta a stabilire una connessione tra il cluster e il nodo MongoDB.server js:

const mongoose = requisite ('mongoose');

Ora creeremo un "separato.env"File per la memorizzazione dell'Atlas MongoDB"Uri" o il "Stringa di connessione". A tale scopo, fai clic sul nodo.cartella del server JS che è "Backend"Nel nostro caso, e poi crea un"Nuovo file":

Abbiamo chiamato il nuovo file come ".env":

Se non si dispone della stringa di connessione, copiala dalla sezione evidenziata:

Quindi, aggiungi la stringa di connessione copiata come "Atlas_uri" nel ".env" file:

Atlas_uri = MongoDB+srv: // linuxhint:@cluster0.8jdc7.MongodB.net/myfirstdatabase?RetryWrites = true & w = maggioranza

Nell'aggiunto "Atlas_uri"Specifica il nome utente e la password MongoDB e premere"Ctrl+s"Per salvare le modifiche aggiunte:

Ora, aggiungi il seguente codice nel tuo nodo.js "server" file:

const Uri = processo.env.Atlas_uri;
mangusta.connettersi (URI);
connessione const = Mongoose.connessione;
connessione.una volta ('Open', () =>
console.log ("connessione al database MongoDB stabilita correttamente");
)

Il codice aggiunto proverà a connettersi con "Atlante Mongodb"Usando"mangusta"Libreria e altas_uri e se la connessione verrà stabilita, stamperà"Connessione del database MongoDB stabilita correttamente"Nella finestra del terminale:

Premere "Ctrl+s"Per salvare le modifiche aggiunte e quindi eseguire il nodo.server js:

> Server nodemon

L'output di seguito dichiara che abbiamo collegato correttamente il nostro nodo.server JS nel database MongoDB nello sviluppo di stack Mern:

Ora, controlleremo il metodo per impostare React.JS sul lato client nello sviluppo di stack Mern.

Come configurare react.JS sul lato client nello sviluppo di stack Mern

Per impostare React.JS Sul lato client nello sviluppo di Mern Stack, la prima cosa che devi fare è selezionare una directory per l'installazione della reazione.Progetto basato su JS. Puoi usare il "Prompt dei comandi" per questo scopo. Tuttavia, utilizzeremo il "Codice Visual Studio"Terminale che renderà anche facile operare con la reazione.Applicazione JS.

Per farlo in primo luogo, cercheremo il "Codice Visual Studio"Applicazione e aprila:

Nell'applicazione aperta, fai clic su "File"Opzione della barra dei menu e selezionare"Cartella aperta" opzione:

Ora, naviga per la cartella in cui vuoi posizionare la tua reazione.File relativo all'applicazione JS. Nel nostro caso, abbiamo selezionato il "Dipendente-merrico-progetto"Cartella, presente in"Disco locale (e :)":

Successivamente, premere "Ctrl+Shift+'"Per aprire il terminale del codice Visual Studio. È inoltre possibile eseguire l'operazione specificata con l'aiuto del menu "terminale":

A questo punto, siamo tutti pronti a impostare la reazione.Applicazione JS in Mern Stack Development. L'esecuzione del “npxComando "con il"Crea-react-app"L'opzione ti aiuta a creare una reazione.Applicazione JS. Ad esempio, il sottoto "npxIl comando "creerà un"Mern-Emsystem"React.Applicazione JS che avrà tutte le dipendenze richieste nella cartella del progetto:

> NPX Crea-React-app Mern-Emsystem

Attendi qualche minuto, poiché l'installazione dei pacchetti richiederà del tempo:

L'output privo di errori di seguito indica che abbiamo installato correttamente "Mern-Emsystem"React.Applicazione JS:

Il codice Visual Studio caricherà automaticamente la cartella di applicazione ReactJS. Ora faremo alcune modifiche nel "indice.html"File del"Mern-Emsystem"React.Applicazione JS:

IL "indice.html"File della tua reazione.L'applicazione JS sembrerà in qualche modo questo:

Qui, "React app"Sta rappresentando il"titolo" del nostro "Mern-Emsystem" applicazione:

Utilizzeremo la reazione creata.Applicazione JS per lo sviluppo di un sistema di gestione dei dipendenti con Mern Stack. Quindi, in primo luogo, cambieremo il titolo del nostro "Mern-Emsystem"React.applicazione JS a “Sistema di gestione dei dipendenti"E salva l'apertura"indice.html" file:

Nel prossimo passaggio, cambieremo l'attuale directory di lavoro in "Mern-Emsystem"Utilizzando il terminale:

> CD Mern-Emsystem

Ora, scrivi il di seguito "npm"Comando per l'avvio dello sviluppo del server Web:

> NPM Avvia

Come puoi vedere dall'output che il nostro "Mern-Emsystem"Il progetto è compilato correttamente e pronto per la visualizzazione nel browser:

Digitando il "Localhost: 3000"Nella barra degli indirizzi del nostro browser vedremo la seguente interfaccia per"Mern-Emsystem"React.Applicazione JS:

Puoi anche aggiungere modifiche al contenuto di "App.js"File JavaScript per la gestione o la visualizzazione dei componenti dell'applicazione React:

Ad esempio, aggiungendo il seguente codice nel nostro "App.jsIl file "salverà il"Sistema di gestione dei dipendenti"Contenuto all'interno di un contenitore:

importazione./App.CSS ';
function app ()
ritorno (

Sistema di gestione dei dipendenti

);

Esporta app predefinita;

Dall'immagine qui sotto, puoi vedere che l'aggiunta "Sistema di gestione dei dipendenti"Contenuto per la nostra reazione.L'applicazione JS viene visualizzata correttamente:

Si trattava di una procedura di creazione di reazione.Applicazione JS sul lato client nello sviluppo di Stack Mern. Puoi fare ulteriore personalizzazione in base alle tue esigenze.

Conclusione

Mern Stack è un potente framework di applicazioni Web utilizzato per la creazione di siti Web e applicazioni moderni. Comprende react.JS per sviluppare il front-end e il nodo.JS per creare il backend e il database MongoDB per mantenere il database. Questo articolo ha dimostrato come iniziare con lo stack Mern. Viene fornita ogni procedura, dall'impostazione della reazione.Applicazione e nodo JS.server JS per collegare il server con il database MongoDB.