Як створити та розгорнути повноцінний MERN-додаток - javascript.org.ua

MERN стек (MongoDB, Express.js, React.js, Node.js) є популярним вибором для створення повноцінних веб-додатків. Він надає цілісну платформу для сучасної веб-розробки.

Що таке MERN стек?

MongoDB: NoSQL база даних для зберігання даних додатку.
Express.js: Веб-фреймворк для бекенду для створення API та логіки на сервері.
React.js: Бібліотека для фронтенду для створення інтерфейсів користувача.
Node.js: Рuntime середовище для виконання коду на сервері за допомогою JavaScript.

Ці технології працюють разом, створюючи надійні та масштабовані додатки.

Крок 1: Налаштування середовища

Переконайтесь, що у вас встановлено наступне:

Node.js та npm: Для розробки на сервері та керування залежностями.
MongoDB: Для роботи з базою даних локально або через хмарний сервіс, такий як MongoDB Atlas.
Редактор коду: Рекомендується використовувати VS Code.

Крок 2: Ініціалізація проекту

Створіть папку для вашого проекту.
Виконайте наступні команди:

mkdir mern-app  
cd mern-app  
npm init -y

Це ініціалізує ваш проект з файлом package.json.

Крок 3: Створення бекенду (Node.js + Express.js)

Встановіть залежності:

npm install express mongoose dotenv cors

Створіть файл сервера:

touch server.js

Налаштуйте бекенд:

const express = require("express");  
const mongoose = require("mongoose");  
const cors = require("cors");  
require("dotenv").config();  

const app = express();  
const PORT = process.env.PORT || 5000;  

app.use(cors());  
app.use(express.json());  

// Підключення до MongoDB  
mongoose.connect(process.env.MONGO_URI, {  
 useNewUrlParser: true,  
 useUnifiedTopology: true,  
})  
 .then(() => console.log("MongoDB підключено"))  
 .catch(err => console.error(err));  

// Пример маршруту  
app.get("/", (req, res) => {  
 res.send("Ласкаво просимо до MERN App Backend!");  
});  

app.listen(PORT, () => console.log(`Сервер працює на порту ${PORT}`));

Додайте файл .env:

MONGO_URI=your_mongodb_connection_string

Крок 4: Створення фронтенду (React.js)

Створіть React додаток:

npx create-react-app client  
cd client

Встановіть Axios для API запитів:

npm install axios

Налаштуйте базовий компонент для отримання даних:

import React, { useEffect, useState } from "react";  
import axios from "axios";  

const App = () => {  
 const [message, setMessage] = useState("");  

 useEffect(() => {  
 axios.get("http://localhost:5000/")  
 .then(response => setMessage(response.data))  
 .catch(error => console.error(error));  
 }, []);  

 return (  
   <div>{message}</div>  
 );  
};  

export default App;

Запустіть React додаток:

npm start

Крок 5: Підключення фронтенду до бекенду

Щоб уникнути проблем з CORS, додайте проксі в package.json React додатку:

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

Крок 6: Розгортання додатку

Розгортання бекенду

Використовуйте сервіс, такий як Heroku або Render:

Створіть обліковий запис на Heroku та встановіть Heroku CLI.
Ініціалізуйте Git репозиторій:

git init  
git add .  
git commit -m "Initial commit"

Розгорніть:

heroku create  
git push heroku main

Розгортання фронтенду

Використовуйте сервіс, такий як Vercel або Netlify:

Встановіть Vercel CLI:

npm install -g vercel

Розгорніть:

vercel

Найкращі практики для розробки MERN

Організуйте ваш код: Використовуйте окремі папки для моделей, контролерів та маршрутів.
Змінні середовища: Використовуйте .env для управління секретами.
Обробка помилок: Реалізуйте правильну обробку помилок як на фронтенді, так і на бекенді.
Управління станом: Використовуйте інструменти, такі як Redux для більших додатків.

Висновок

Створення та розгортання MERN додатку включає налаштування бекенду, підключення його до фронтенду та розгортання обох частин на хостинг-сервісах. Гнучкість та простота використання MERN стеку роблять його популярним вибором для розробників повного стеку.
З цим посібником ви зможете створити свій перший додаток на MERN та вивести свої навички веб-розробки на новий рівень.

Перекладено з: How to Build and Deploy a Full-Stack MERN Application