MERN Stack: руководство для новых разработчиков

Стек MERN стал мощной основой для современной веб-разработки, объединяющей MongoDB, Express.js, React.js и Node.js. Это руководство проведет вас через эффективную настройку приложения стека MERN, используя предварительно настроенный репозиторий и оптимизированное управление средой разработки.

Обзор стека MERN

Стек MERN включает четыре ключевые технологии:

1. MongoDB: Гибкая база данных NoSQL на основе документов
2. Экспресс.js: Минимальная структура веб-приложений для Node.js
3. React.js: Библиотека JavaScript для создания динамических пользовательских интерфейсов
4. Node.js: Среда выполнения JavaScript для масштабируемых серверных приложений

Каждый компонент играет важную роль в создании динамичных и интерактивных веб-приложений.

Настройка среды разработки

Предпосылки

• Базовые знания JavaScript
• Интегрированная среда разработки (IDE), например Visual Studio Code
• Докерустановлен для контейнерной разработки
• Дайтонадля управления вашими средами разработки

Начало работы с приложением MERN

В качестве примера мы будем использовать приложение Creator Relationship Management (CRM). Это полнофункциональное приложение предназначено для инфлюенсеров, подкастеров и создателей контента, чтобы эффективно управлять отношениями с клиентами.

Настройка кластера MongoDB

Следуйте заРуководство по началу работы с MongoDB Atlasдля создания кластера и получения вашего MongoDB URI.

Примечание: Если у вас возникли проблемы с подключением, разрешите доступ из любого места в настройках сетевого доступа вашего кластера.

Настройка рабочей области разработки

Мы будем использовать Daytona для автоматизации настройки среды разработки Node.js с необходимыми инструментами и переадресацией портов на основе нашего стартового проекта.

Клонирование и настройка среды стека MERN

1. Создайте рабочее пространство:

   daytona create https://github.com/daytonaio-experiments/starter-mern-saas.git
   

2. Установите предпочитаемую вами IDE:

   daytona ide
   

3. Откройте рабочее пространство:

   daytona code
   

4. Запустите внутренний сервер:

   • Создать.envфайл в каталоге бэкэнда с вашим MongoDB UR (его можно найти на панели управления Atlas)I:

     MONGO_URI="mongodb+srv://<username>:<password>@SOMETHING.SOMETHING.mongodb.net/?retryWrites=true&w=majority&appName=Cluster0"
     

   • Запускаем сервер:

     cd backend && npm run dev
     

5. Запустите интерфейс:

   • Создать.envфайл в каталоге интерфейса:

     VITE_BACKEND_URL="http://localhost:8000/api/customers/"
     

   • Запустите интерфейс:

     cd frontend && npm run dev
     

Теперь ваше приложение MERN должно работать.

Структура репозитория

Репозиторий организован следующим образом:

• Бэкэнд: Серверный код (Node.js и Express.js)
• Внешний интерфейс: Клиентское приложение (React.js и Tailwind CSS)
• .devcontainer: Файлы конфигурации для среды разработки

Упрощенная настройка с .devcontainer

The.devcontainer/devcontainer.jsonФайл предоставляет предопределенную среду разработки. Вот конфигурация:

{
    "name": "Node.js, Express, React, MongoDB & Tailwind",
    "image": "ubuntu:22.04",
    "features": {
        "ghcr.io/devcontainers/features/common-utils:2.4.7": {
            "username": "daytona",
            "userUid": 1000,
            "userGid": 1000,
            "configureZshAsDefaultShell": true
        },
        "ghcr.io/devcontainers/features/node:1": {
            "nodeGypDependencies": true,
            "version": "lts",
            "nvmVersion": "0.40.0"
        },
        "ghcr.io/devcontainers/features/git:1": {}
    },
    "overrideFeatureInstallOrder": [
        "ghcr.io/devcontainers/features/common-utils",
        "ghcr.io/devcontainers/features/git",
        "ghcr.io/devcontainers/features/node"
    ],
    "portsAttributes": {
        "5174": {
            "label": "Frontend",
            "onAutoForward": "notify"
        },
        "8000": {
            "label": "Backend",
            "onAutoForward": "ignore"
        },
        "27017": {
            "label": "MongoDB",
            "onAutoForward": "ignore"
        }
    },
    "customizations": {
        "vscode": {
            "extensions": [
                "mongodb.mongodb-vscode",
                "dbaeumer.vscode-eslint",
                "esbenp.prettier-vscode",
                "bradlc.vscode-tailwindcss",
                "davidanson.vscode-markdownlint"
            ]
        }
    },
    "workspaceFolder": "/workspaces/starter-mern-saas",
    "onCreateCommand": "npm install -g nodemon",
    "postCreateCommand": "cd backend && npm install && cd ../frontend && npm install",
    "remoteUser": "daytona"
}

Такая конфигурация обеспечивает единообразную среду разработки на разных машинах.

Настройка приложения MERN

Добавление новых маршрутов

1. Создайте новый файл маршрута (например,productRoutes.js):

const express = require('express');
const router = express.Router();
const productService = require('../service/productService');

router.get('/products', async (req, res) => {
    try {
        const products = await productService.getAllProducts();
        res.status(200).json(products);
    } catch (error) {
        res.status(500).json({ message: error.message });
    }
});

module.exports = router;

2. Реализовать функции контроллера в файле службы (productService.js):

class ProductService {
    async getAllProducts() {
        // Logic to fetch all products
    }
}

module.exports = ProductService;

3. Зарегистрируйте новый маршрут вapp.js:

const productRoutes = require('./routes/productRoutes');

app.use('/api', productRoutes);

Добавление новых компонентов React

1. Создайте новый файл компонента (например,ProductList.jsx):

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

const ProductList = () => {
    const [products, setProducts] = useState([]);

    useEffect(() => {
        const fetchProducts = async () => {
            const response = await axios.get('/api/products');
            setProducts(response.data);
        };
        fetchProducts();
    }, []);

    return (
        <div>
            <h1>Products</h1>
            <ul>
                {products.map(product => (
                    <li key={product.id}>{product.name}</li>
                ))}
            </ul>
        </div>
    );
};

export default ProductList;

2. Интегрировать компонент вApp.jsx:

import React from 'react';
import ProductList from './components/ProductList';

function App() {
    return (
        <div className="App">
            <ProductList />
        </div>
    );
}

export default App;

Заключение

Теперь вы настроили приложение стека MERN, клонировали пример репозитория и узнали, как настраивать как бэкэнд, так и фронтэнд. Этот оптимизированный процесс настройки позволяет вам сосредоточиться на разработке и улучшении вашего приложения, не беспокоясь о несоответствиях среды.

Удачного кодирования и приятного пути разработки с использованием стека MERN!