Introducere în MERN

În acest articol, vom construi și implementa o aplicație construită cu stiva MERN în Heroku.

MERN, care înseamnă MongoDB, Express, React și Node.js, este un popular stack tehnologic utilizat în construirea de aplicații web. Implică frontend work (cu React), backend work (cu Express și NodeJS) și o bază de date (cu MongoDB).

Herokupe de altă parte, este o platformă ca serviciu (PaaS) care permite dezvoltatorilor să construiască, să ruleze și să opereze aplicații în întregime în cloud.

Pentru baza de date, vom folosi MongoDB Atlas, care este un serviciu global de baze de date cloud pentru aplicații moderne. Acest lucru este mai sigur decât MongoDB instalat local pe serverul nostru și ne oferă, de asemenea, spațiu pentru mai multe resurse pe serverele noastre.

Pentru frontend, vom construi o aplicație simplă React care face solicitări POST către un API pentru a adăuga un utilizator și, de asemenea, poate face cereri GET pentru a atrage toți utilizatorii.

Puteți trece la orice pas cu cuprinsul listat mai jos.

Cuprins

  • Introducere în MERN
  • Să începem să construim
  • Construirea aplicației React
  • Crearea backend-ului
  • Conectați baza de date Atlas MongoDB
  • Apelarea API-urilor pe frontend
  • Distribuirea pe Heroku
  • Creați o aplicație Heroku
  • Configurați package.json
  • Învelire

Să începem să construim

Construirea aplicației React

Notă: Înainte de a începe cu proiectul nostru, node trebuie să fie instalat pe computer. node ne oferă, de asemenea npm, care este folosit pentru instalarea pachetelor.

Instalare create-react-app

create-react-app este folosit pentru a crea o aplicație starter React.

Dacă nu aveți create-react-app instalat, tastați următoarele în linia de comandă:

npm i create-react-app -g

-g flag instalează pachetul la nivel global.

Creați directorul proiectului

create-react-app my-project
cd my-project

Cele de mai sus creează un director „proiectul meu” și instalează dependențe care vor fi utilizate în aplicația de pornire React. După terminarea instalării, a doua comandă se modifică în directorul proiectului.

Porniți aplicația și efectuați modificările necesare

npm start

Comanda de mai sus pornește aplicația React, care vă oferă o adresă URL în care previzualizați proiectul. Apoi puteți face modificările necesare, cum ar fi schimbarea imaginilor sau a textului.

Instalați axios

npm i axios --save

axios este o bibliotecă JavaScript utilizată pentru a facilita solicitările HTTP. Acesta va fi folosit pentru a trimite cereri din frontend (React) către API-urile furnizate de backend.

Crearea backend-ului

Backend-ul gestionează API-urile, gestionează cererile și, de asemenea, se conectează la baza de date.

Instalați pachetele backend

npm i express cors mongoose body-parser --save
  1. express: “Express este un cadru de aplicații web minim și flexibil Node.js care oferă un set robust de caracteristici pentru aplicațiile web” – Express Documentație
  2. cors: “CORS este un pachet node.js pentru furnizarea unui middleware Connect / Express care poate fi utilizat pentru a activa CORS cu diverse opțiuni” – cors Documentare
  3. mongoose: “Mongoose este un instrument de modelare a obiectelor MongoDB conceput pentru a funcționa într-un mediu asincron. Mongoose acceptă atât promisiuni, cât și apeluri de apel” – Documentația Mangustă
  4. body-parser: “Corpul Node.js analizează middleware.” – Documentare body-parser

Creați folderul backend

mkdir backend
cd backend

Configurați backend-ul

Creați un punct de intrare server.js

Mai întâi, creați un server.js , care va fi punctul de intrare în backend.

touch server.js

În server.js, tastați următoarele:

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const path = require('path')
const app = express();
require('./database');
-----
app.use(bodyParser.json());
app.use(cors());
-----
// API
const users = require('/api/users');
app.use('/api/users', users);
-----
app.use(express.static(path.join(__dirname, '../build')))
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, '../build'))
})
-----
const port = process.env.PORT || 5000;
app.listen(port, () => {
    console.log(`Server started on port ${port}`);
});

express.static furnizează fișiere statice care sunt cele construite atunci când npm run build este rulat pe un proiect React. Amintiți-vă, fișierul construit se află în folderul de construire.

Din configurația noastră, orice cerere trimisă către /api/users va fi trimis la users API pe care urmează să îl configurăm.

Configurați fișierul users API
mkdir api
touch api/users.js

În api/users.js, adăugați următoarele:

const express = require('express');
const router = express.Router()
-----
const User = require('../models/User');
-----
router.get('/', (req, res) => {
    User.find()
        .then(users => res.json(users))
        .catch(err => console.log(err))
})
-----
router.post('/', (req, res) => {
    const { name, email } = req.body;
    const newUser = new User({
        name: name, email: email
    })
    newUser.save()
        .then(() => res.json({
            message: "Created account successfully"
        }))
        .catch(err => res.status(400).json({
            "error": err,
            "message": "Error creating account"
        }))
})
module.exports = router 

În codul de mai sus, creăm un handler de solicitări GET și POST care preia toți utilizatorii și îi postează pe utilizatori. Preluarea și adăugarea unui utilizator la baza de date este ajutată de User model pe care îl vom crea.

Crea User model
mkdir models
touch models/user.js

În models/user.js, adăugați următoarele:

const mongoose = require('mongoose');
const Schema = mongoose.Schema;
-----
const userSchema = new Schema({
    name: {
        type: String,
        required: true
    },
    email: {
        type: String,
        required: true
    }
})
module.exports = mongoose.model("User", userSchema, "users")

În codul de mai sus, este creată o schemă pentru utilizator care conține câmpurile utilizatorului. La sfârșitul fișierului, modelul („Utilizator”) este exportat împreună cu schema și colecția („utilizatori”).

Conectați baza de date Atlas MongoDB

Conform documentele, “MongoDB Atlas este serviciul global de baze de date cloud pentru aplicații moderne.”

Mai întâi trebuie să ne înregistrăm pe cloud Mongo. Treci prin această documentație pentru a crea un cont Atlas și a vă crea clusterul.

Un lucru demn de remarcat este lista albă a adresei IP a conexiunii. Dacă ignorați acest pas, nu veți avea acces la cluster, așa că acordați atenție acestui pas.

Clusterul este un server mic care va gestiona colecțiile noastre (similar tabelelor din bazele de date SQL). Pentru a vă conecta backend-ul la cluster, creați un fișier database.js, care după cum puteți vedea este necesar în server.js. Apoi introduceți următoarele:

const mongoose = require('mongoose');
const connection = "mongodb+srv://username:<password>@<cluster>/<database>?retryWrites=true&w=majority";
mongoose.connect(connection,{ useNewUrlParser: true, useUnifiedTopology: true, useFindAndModify: false})
    .then(() => console.log("Database Connected Successfully"))
    .catch(err => console.log(err));

În connection variabilă, introduceți username (pentru cloud MongoDB), password (parola cluster), dvs. cluster (adresa pentru clusterul dvs.) și database (numele bazei de date). Toate acestea pot fi ușor descoperite dacă ați urmat documentația.

Apelarea API-urilor pe frontend

Toate API-urile vor fi disponibile pe localhost:5000 local, la fel cum ne-am instalat server.js. Când este implementat pe Heroku, serverul va utiliza portul furnizat de server (process.env.PORT).

Pentru a face lucrurile mai ușoare, React ne permite să specificăm un proxy la care cererile vor fi trimise.

Deschis package.json și chiar înainte de ultima acoladă, adăugați următoarele:

"proxy": "http://localhost:5000"

Astfel putem trimite direct solicitări către api/users. Și când site-ul nostru este implementat și construit, portul implicit al aplicației noastre va fi utilizat cu același API.

Deschis App.js pentru React și adăugați următoarele:

import React, {useState, useEffect} from 'react'
import axios from 'axios';
-----
const App = function () {
	const [users, setUsers] = useState(null);

	const [username, setUsername] = useState("");
	const [email, setEmail] = useState("");
	useEffect(() => {
		axios
			.get("/api/users")
			.then((users) => setUsers(users))
			.catch((err) => console.log(err));
	}, []);

	function submitForm() {
		if (username === "") {
			alert("Please fill the username field");
			return;
		}
		if (email === "") {
			alert("Please fill the email field");
			return;
		}
		axios
			.post("/api/users", {
				username: username,
				email: email,
			})
			.then(function () {
				alert("Account created successfully");
				window.location.reload();
			})
			.catch(function () {
				alert("Could not creat account. Please try again");
			});
	}
	return (
		<>
			<h1>My Project</h1>
			{users === null ? (
				<p>Loading...</p>
			) : users.length === 0 ? (
				<p>No user available</p>
			) : (
				<>
					<h2>Available Users</h2>
					<ol>
						{users.map((user, index) => (
							<li key={index}>
								Name: {user.name} - Email: {user.email}
							</li>
						))}
					</ol>
				</>
			)}

			<form onSubmit={submitForm}>
				<input
					onChange={(e) => setUsername(e.target.value)}
					type="text"
					placeholder="Enter your username"
				/>
				<input
					onChange={(e) => setEmail(e.target.value)}
					type="text"
					placeholder="Enter your email address"
				/>
				<input type="submit" />
			</form>
		</>
	);
};
export default App

useState și useEffect cârligele sunt folosite pentru a manipula starea și sideEffects. Ceea ce se întâmplă practic este că prima stare a utilizatorilor este null și „Încărcare …” este afișat în browser.

În useEffect, [] este folosit pentru a specifica că la componentDidMount stage (când componenta este montată), faceți o cerere Axios către API-ul care rulează localhost:5000. Dacă obține rezultatul și nu există niciun utilizator, se afișează „Niciun utilizator disponibil”. În caz contrar, este afișată o listă numerotată a utilizatorilor.

Dacă doriți să aflați mai multe despre useState și useEffect, consultați acest articol – Ce naiba este React Hooks?

Cu formularul disponibil, se poate face o cerere POST pentru a posta un nou utilizator. Starea intrărilor sunt controlate și trimise către API la localhost:5000 la depunere. Ulterior, pagina este reîmprospătată și este afișat noul utilizator.

Implementarea pe Heroku

Pentru a implementa aplicația dvs. pe Heroku, trebuie să aveți un cont Heroku.

Mergi la pagina lor pentru a crea un cont. Apoi treci prin documentarea lor despre cum să creați o aplicație Heroku. De asemenea, verificați documentația pe Heroku CLI.

Creați o aplicație Heroku

Mai întâi, conectați-vă la Heroku:

heroku login

Acest lucru vă va redirecționa către o adresă URL din browser unde vă puteți conecta. După ce ați terminat, puteți continua în terminal.

În același director de proiect React, rulați următoarele:

heroku create

Aceasta va crea o aplicație Heroku și vă va oferi, de asemenea, adresa URL pentru a accesa aplicația.

Configurați package.json

Heroku folosește fișierul package.json pentru a ști ce scripturi să ruleze și ce dependențe să instalezi pentru ca proiectul tău să ruleze cu succes.

În dumneavoastră package.json fișier, adăugați următoarele:

{
    ...
    "scripts": {
        ...
        "start": "node backend/server.js",
        "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install npm && run build"
    },
    ...
    "engines": {
        "node": "10.16.0"
    }
}

Heroku rulează o post build, care, după cum puteți vedea, vă instalează dependențele și rulează o build a proiectului dvs. React. Apoi începe proiectul dvs. cu start script care pornește practic serverul. După aceea, proiectul dvs. ar trebui să funcționeze bine.

engines specifică versiunile motoarelor precum node și npm a instala.

Împingeți la Heroku

git push heroku master

Acest lucru vă împinge codul către Heroku. Nu uitați să includeți fișiere inutile în .gitignore.

După câteva secunde, site-ul dvs. va fi gata. Dacă există erori, puteți verifica terminalul sau accesați tabloul de bord din browser pentru a vizualiza jurnalele de construire.

Acum puteți previzualiza site-ul dvs. la adresa URL trimisă de Heroku când ați rulat heroku create.

Cam despre asta e. Mă bucur că ai citit până aici.

Învelire

Desigur, există mai multe aplicații de tip MERN.

Acest articol nu a fost la fel de profund ca autentificările, datele de conectare, sesiunile și toate acestea. Tocmai a acoperit modul de implementare a aplicațiilor de stivă MERN pe Heroku și de a lucra cu MongoDB Atlas.

Puteți găsi alte articole de genul acesta pe blogul meu – dillionmegida.com

Mulțumesc pentru lectură.