Hvordan komme i gang med Mern Stack

Mern Stack er et sett med pålitelige og kraftige teknologier som kan brukes til å utvikle skalerbare webapplikasjoner. Denne webapplikasjonen inneholder en front-end, back-end og database for lagring av dataene. Det er et Full-Stack JavaScript-rammeverk som brukes til å bygge brukervennlige nettsteder og applikasjoner.

For å komme i gang med Mern Stack, må vi gjøre følgende første gang, sette opp nodeserveren, opprette en MongoDB -database og etablere en tilkobling med Node -serveren. Det tredje og det viktigste trinnet er å bygge frontend reagen.JS -applikasjon. Denne oppskrivningen vil vise deg hvordan du utfører alle disse operasjonene. Før vi går videre, la oss diskutere de nevnte komponentene i Mern Stack.

Komponenter av Mern Stack

• JS regnes som toppnivået i Mern Stack -utviklingen. Det er en erklærende JavaScript Framework Brukes til å utvikle dynamiske applikasjoner på klientsiden. Det tillater deg også å lage komplekse grensesnitt ved å koble komponentene i dataene dine fra backend -serveren og deretter gjøre dem som HTML. React utmerker seg også med å håndtere datadrevne og statlige grensesnitt med minimal kode og andre funksjoner som feilhåndtering, lister, skjemaer, hendelser, som du forventer av et moderne nettrammeverk.
• Hvis du vil utvikle en applikasjon basert på Mern Stack Som lagrer enhver form for data som hendelser, kommentarer, brukerprofiler, innhold og opplastinger, trenger du en enkel database for å bruke med front-end og back-end. Dette er situasjonen der Mongodb kommer i spill. I reagen.JS frontend, de opprettede JSON -dokumentene blir sendt til Express.JS og noden.JS Server, behandler dem og lagrer dem i MongoDB -databasen.
• I Mern Stack Development, Nivået som er til stede mellom MongoDB -databasen og React.JS front-end er "JS”. Det kan beskrives som en minimalistisk, uopinionert og raske nettramme for node.JS. Uttrykke.JS Framework driver noden.JS -server inne i den. Du kan koble deg til ekspressen.JS-funksjoner fra applikasjonen din frontend ved å sende innleggene, få, eller HTTP-forespørsler. Disse spesifiserte funksjonene blir deretter brukt til å endre eller få tilgang til MongoDB -dataene via løfter eller tilbakeringinger. Uttrykke.JS tilbyr også kraftige modeller for håndtering av HTTP -svar, forespørsler og URL -ruting.

La oss komme i gang med Mern Stack!

Hvordan sette opp nodeserveren i Mern Stack Development

For å sette opp nodeserveren i Mern Stack Development, er det første du må gjøre å laste ned Node.JS på systemet ditt gjennom det offisielle nettstedet:

Bruk deretter den nedlastede filen for å fullføre installasjonen av noden.JS og etter å ha fullført den spesifiserte operasjonen, utfører du det nedenfor gitt i ledeteksten din:

> Node -V

Ovennevnte “Node”Kommando med“-v”Alternativet vil skrive ut den nåværende versjonen av“Node.JS”Som er installert på systemet ditt:

Etter å ha installert node.JS, vi vil gå videre mot prosedyren for utvikling av serveren. For dette formålet vil vi for det første opprette en basismappe og deretter installere alle nødvendige pakker eller avhengigheter for Node Server -utviklingen.

For den spesifiserte operasjonen kan du også bruke ledetekst. Imidlertid vil vi bruke "Visual Studio Code”Terminal som også vil gjøre det enkelt å jobbe i Node -serverfilene.

I neste trinn åpner vi vår basismappe ved å bruke "Åpen mappe”Alternativ for“Fil" Meny:

Vi har valgt "Ansatt-Mern-Project”Mappe for lagring av filene relatert til nodeserveren til Mern Stack:

Nå, trykk “Ctrl+skift+'”For å åpne opp et nytt terminalvindu i Visual Studio -koden. Du kan også bruke "terminalen" -menyen til dette formålet:

I neste trinn vil vi lage en "baksiden”Mappe inne i vår“Ansatt-Mern-Project”Rot- eller basismappe. For å gjøre det samme, kan du utføre det undergitte “mkdir”Kommando i den åpne terminalen:

> mkdir backend

Etter å ha gjort det, vil vi flytte inn i det nyopprettede "baksiden”Mappe for å legge til den serverrelaterte filen og pakker i den:

> CD -backend

Inne i “baksiden”Mappe, vi vil nå opprette en“pakke.JSON”Fil. Pakken.JSON -filen er kjerneelementet i en nodeserver i Mern Stack -utvikling. Det omfatter metadataene til Mern Stack -prosjektet ditt og definerer også de funksjonelle attributtene som deretter kan brukes av NPM for å utføre skript og installere avhengigheter.

For å lage en ny pakke.JSON -fil for nodeserveren din, skriv ut følgende kommando:

> npm init -y

Hvordan installere avhengigheter for Node Server i Mern Stack Development

Denne delen vil demonstrere prosedyren for å installere viktige avhengigheter som "uttrykke”,“Cors”,“mongoose”, Og“Dotenv”For nodeserveren din i Mern Stack -utviklingen. Node -pakkeansvarlig eller “npm”Kan brukes til å installere de spesifiserte avhengighetene på følgende måte:

> NPM Install Express Cors Mongoose Dotenv

Her:

• “Express” legges til for å installere “Express” som er et lett webrammeverk for node.JS. Det har også muligheten til å støtte mange mellomvarer som hjelper til med å gjøre koden enklere og kortere å skrive.
• “Cors” er et forkortelse for ressursdeling på tvers av opprinnelse. Denne pakken tillater Ajax -forespørsler å få tilgang til ressursene fra de eksterne vertene.
• “Mongoose” legges til for å installere “Mongoose” -pakken. Mongoose -pakken hjelper nodeserveren til å samhandle med MongoDB i Mern Stack Development.
• Til slutt vil "dotenv" -pakken laste miljøvariablene fra ".env ”til“ prosessen.Env ”-filen. Den administrerer også databasen legitimasjon i et samarbeidsmiljø.

For nodeserveren vår er en annen pakke som vi skal installere “Nodemon”. Den starter automatisk node -applikasjonen når du har gjort noen endringer i filen mens du utviklet noden.JS -basert applikasjon:

> sudo npm install -g nodemon

Hvordan du kjører nodeserveren i Mern Stack -utvikling

Til dette punktet har vi installert Node.JS og de nødvendige pakker og avhengigheter. Nå er det på tide å lage og kjøre backend -noden.JS Server. For å gjøre det, klikk på “baksiden”Mappe, og fra rullegardinmenyen, velg“Ny fil”Alternativ:

Her kan du en ny “server.JS”JavaScript -fil er lagt til i backend -mappen:

Nå, i “server.JS”Fil, vi oppretter en“uttrykke”Server, så vil vi legge ved“uttrykke.JSON”Mellomvare og“Cors”. “uttrykke.JSON”Middleware vil bli brukt til å sende og motta“ JSON ”. Også noden.JS -serveren har lov til å lytte til "5000" havn:

const express = krever ('ekspress');
const cors = krever ('cors');
krever ('dotenv').config ();
const app = express ();
const port = prosess.env.Port || 5000;
app.bruk (cors ());
app.bruk (uttrykk.json ());
app.lytt (port, () =>
konsoll.Logg ('Serveren kjører på port: $ port');
);

Etter å ha lagt til den ovennevnte koden i "server.JS”Fil, trykk“Ctrl+s”For å lagre endringene og deretter kjøre nodeserveren din ved å bruke“Nodemon”:

> Nodemon -server

Fra utdataene kan du se at serveren vår kjører på port "5000”:

Etter å ha kjørt noden.JS -serveren på den spesifiserte porten, gå videre mot prosessen med å koble til noden.JS -server til MongoDB -databasen. For det må du først opprette en MongoDB -konto først.

Hvordan lage MongoDB -database i Mern Stack Development

I Mern Stack-utvikling er det å ha en MongoDB-databasekonto. Opprette en MongoDB -konto tillater deg å bygge en database i henhold til dine krav. Etter det kan du legge til en “Klynge”Til den nyopprettede databasen og generere en tilkoblingsstreng, som vil hjelpe deg med å koble til noden.JS -server til MongoDB -databasen. Så la oss starte denne prosedyren ved å gå mot det offisielle nettstedet til MongoDB:

Lag nå en konto for å være vert for databasen i "Mongodb Atlas”:

Du vil se det undergitte dashbordet etter oppretting av MongoDB-kontoen. Nå, klikk på “Nytt prosjekt”-Knappen som er plassert på høyre side av dashbordet:

I det uthevede inngangsfeltet, skriv inn MongoDB -prosjektnavnet ditt og klikk på "NESTE”Knapp:

På dette tidspunktet er MongoDB -prosjektet ditt opprettet, og dere er alle klar til å bygge en ny database:

I neste trinn, velg leverandøren og sonen for databasen din. For eksempel har vi valgt "Google Cloud”Som skyleverandør og“Lowa”Som vår region. Det anbefales også å velge et gratis nivå som viser seg å være bra for et sandkassemiljø.

Etter å ha valgt de nødvendige alternativene, klikker du på "Lag klynge”Knapp for å gå videre:

For å opprettholde MongoDB -sikkerhet, velg et alternativ mellom "Brukernavn og passord”Og“Sertifikat”For å autentisere tilkoblingen fra eller til noden.JS. I vårt tilfelle har vi lagt til brukernavnet og passordet:

Legg nå IP -adressene dine til MongoDB Whitelist. Dette alternativet vil tillate den konfigurerte IP -adressen å få tilgang til prosjektets klynger:

Etter å ha satt opp IP -adressen, klikker du på "Fullfør og lukk”Knapp:

I løpet av få minutter vil den opprettede klyngen av MongoDB -prosjektet bli gitt:

Hvordan generere en mongoDB -streng for å koble til node.JS Server i Mern Stack -utvikling

Etter å ha satt opp “Ansatt-Mern-Project”Database, og den nyopprettede”Cluster0”, Gå til“Database -distribusjoner”Seksjon og velg klyngen. Etter å ha gjort det, klikker du på "Koble”-Knappen som er uthevet i det undergitte bildet under:

Deretter vil du bli bedt om å velge tilkoblingsmetoden for cluster0. Vi ønsker å koble til noden vår.JS -server til MongoDB -databasen i MERN Stack applikasjonsutvikling, så vi vil gå med "Koble søknaden din”Alternativer:

Deretter velger du "SJÅFØR" og dets "VERSJON”Og kopier deretter tilkoblingsstrengen fra bunnen av vinduet:

Hvordan koble til node.JS Server til MongoDB -databasen i Mern Stack Development

I Mern Stack Development, for å koble til noden.JS og MongoDB -databasen, vi bruker tilkoblingsstrengen, som vi har kopiert inn fra "Koble til Cluster0”Vindu. For å gjøre det, åpne opp noden.JS “server.JS”Fil og sørg for at serveren din kjører:

> Nodeman Server

I neste trinn vil vi legge til “mongoose”Bibliotek. “mongoose”Node.JS -bibliotek hjelper til med å etablere en forbindelse mellom MongoDB -klyngen og noden.JS Server:

const mongoose = krever ('mongoose');

Nå vil vi lage en egen “.env”Fil for lagring av MongoDB Atlas”Uri" eller "Tilkoblingsstreng”. For dette formålet, klikk på noden.JS Server -mappe som er "baksiden”I vårt tilfelle, og oppretter en“Ny fil”:

Vi har kalt den nye filen som ".env”:

Hvis du ikke har tilkoblingsstrengen, kan du kopiere den fra den uthevede delen:

Legg deretter til den kopierte tilkoblingsstrengen som "Atlas_uri”I“.env”Fil:

Atlas_uri = mongodb+srv: // linuxhint:@cluster0.8jdc7.Mongodb.nett/myfirstdatabase?RetryWrites = True & W = flertall

I det ekstra "Atlas_uri”Spesifiser ditt MongoDB -brukernavn og passord og trykk“Ctrl+s”For å lagre de ekstra endringene:

Legg nå til følgende kode i noden din.JS “server”Fil:

const uri = prosess.env.Atlas_uri;
mongoose.Connect (URI);
Const Connection = Mongoose.forbindelse;
forbindelse.en gang ('åpen', () =>
konsoll.Log ("MongoDB Database Connection etablert vellykket");
)

Den ekstra koden vil prøve å koble til "Mongodb Atlas" ved hjelp av "mongoose”Bibliotek og altas_uri og hvis forbindelsen etableres, vil den skrive ut“MongoDB -databasetilkobling etablert vellykket”På terminalvinduet:

Trykk "Ctrl+s”For å lagre de ekstra endringene og deretter kjøre noden.JS Server:

> Nodemon -server

Den undergitte utgangen erklærer at vi har koblet sammen noden vår.JS -server til MongoDB -databasen i Mern Stack -utvikling:

Nå vil vi sjekke ut metoden for å sette opp React.JS på klientsiden i Mern Stack Development.

Hvordan oppsett React.JS på klientsiden i Mern Stack Development

For å sette opp React.JS på klientsiden i Mern Stack Development, det første du trenger å gjøre er å velge en katalog for installasjon av React.JS -basert prosjekt. Du kan bruke “Ledeteksten”For dette formålet. Imidlertid vil vi bruke "Visual Studio Code”Terminal som også vil gjøre det enkelt å betjene med React.JS -applikasjon.

For å gjøre det for det første, vil vi se etter “Visual Studio Code”Søknad og åpne den:

I det åpne applikasjonen klikker du på "Fil”Alternativet til menylinjen og velg“Åpen mappe”Alternativ:

Nå, bla gjennom mappen der du vil plassere reagen din.JS-applikasjonsrelatert fil. I vårt tilfelle har vi valgt "Ansatt-Mern-Project”Mappe, til stede i“Lokal disk (E :)”:

Neste, trykk “Ctrl+Shift+'”Å åpne den visuelle studiokodeterminalen. Du kan også utføre den spesifiserte operasjonen ved hjelp av "Terminal" -menyen:

På dette tidspunktet er vi alle klare til å sette opp React.JS -applikasjon i Mern Stack Development. Utførelsen av “npx”Kommando med“lage-react-app”Alternativet hjelper deg med å lage en react.JS -applikasjon. For eksempel det undergitte "npx”Kommando vil opprette en“Mern-Emsystem”REACT.JS -applikasjon som vil ha alle nødvendige avhengigheter i prosjektmappen:

> NPX Create-React-App Mern-Emsystem

Vent noen minutter, da installasjonen av pakkene vil ta litt tid:

Den undergitte feilfrie utgangen indikerer at vi har installert "Mern-Emsystem”REACT.JS -applikasjon:

Visual Studio-koden vil automatisk laste inn den opprettet ReactJS-applikasjonsmappen i den. Nå vil vi gjøre noen endringer i "indeks.html”Fil av“Mern-Emsystem”REACT.JS -applikasjon:

“indeks.html”Filen til reagen din.JS -applikasjonen vil på en eller annen måte se slik ut:

Her, “React App”Representerer“tittel" av vår "Mern-Emsystem" applikasjon:

Vi vil bruke den skapte React.JS -applikasjon for å utvikle et ansattes styringssystem med Mern Stack. Så for det første vil vi endre tittelen på vår "Mern-Emsystem”REACT.JS -søknad til “Ansattes styringssystem”Og lagre det åpnet”indeks.html”Fil:

I neste trinn vil vi endre den gjeldende arbeidskatalogen til “Mern-Emsystem”Bruke terminalen:

> CD Mern-Emsystem

Nå, skriv ut det undergitte "npm”Kommando for å starte utviklingen av webserveren:

> NPM Start

Som du kan se av utgangen som vår “Mern-Emsystem”Prosjektet er samlet og klart til å se i nettleseren:

Ved å skrive "Localhost: 3000”I adresselinjen i nettleseren vår vil vi se følgende grensesnitt for“Mern-Emsystem”REACT.JS -applikasjon:

Du kan også legge til endre innholdet i "App.JS”JavaScript -fil for håndtering eller visning av komponentene i React -applikasjonen din:

For eksempel å legge til følgende kode i vår "App.JS”-Filen vil lagre“Ansattes styringssystem”Innhold inne i en beholder:

importere './App.CSS ';
funksjon app ()
komme tilbake (

Ansattes styringssystem

);

Eksporter standardapp;

Fra det undergitte bildet kan du se at den ekstra "Ansattes styringssystem”Innhold for vår react.JS -applikasjon vises vellykket:

Det handlet om prosedyren for å sette opp React.JS-applikasjon på klientsiden i Mern Stack Development. Du kan gjøre ytterligere tilpasning i henhold til dine krav.

Konklusjon

Mern Stack er et kraftig rammeverk for webapplikasjoner som brukes til å bygge moderne nettsteder og applikasjoner. Det omfatter React.JS for å utvikle frontend, ekspress og node.JS for å opprette backend, og MongoDB -databasen for å opprettholde databasen. Denne oppskrivningen demonstrerte hvordan du kommer i gang med Mern Stack. Hver prosedyre er gitt, fra å sette opp React.JS -applikasjon og node.JS Server for å koble serveren med MongoDB -databasen.