Настройка проекта стека MERN для публикации на Github

Это пошаговое руководство по настройке проекта MERN и первой публикации вашего проекта полного стека на Github. Если вам нужен только способ отправки на Github, пожалуйста, выполните шаги с 3 по 11.

Необходимые условия

• Вы установили Node.js в своей рабочей среде.
• У вас есть учетная запись на Github.

1.Создайте каталоги для вашего проекта.

Создайте директории проекта и сервера. Директория сервера (или бэкенда) является дочерней по отношению к папке проекта.

Пока не создавайте клиент. Каталог клиента будет создан на следующем шаге.

2. Создайте приложение React в папке client.

В командной строке убедитесь, что вы находитесь внутри каталога проекта. Создайте react-приложение и назовите его client (или frontend).

$ cd project
$ npx create-react-app client

3. Удалите git-репозиторий в каталоге client.

Нам нужно удалить git-репозиторий в папке client. Репозиторий git был создан на шаге 2, где было настроено приложение react.

В командной строке перейдите в папку client и введите следующие коды. Если вам интересно, что делает «rm -rf», посмотрите ссылку внизу этой статьи.

$ cd client
$ rm -rf .git

4. Переместите файл .gitignore из клиента в каталог проекта.

Вы видите файл .gitignore в каталоге клиента, как на фото ниже.

Переместите файл .gitignore для клиента в каталог проекта.

5.Редактирование .gitignore

Откройте файл .gitignore и найдите «/node_modules» и «/build». Вы должны убрать косую черту(«/») перед node_modules и build. В результате этого node_modules и build как на клиенте, так и на сервере будут игнорироваться.

# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
build

# misc
.DS_Store
.env
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

6. Инициализируйте git в проекте.

Перейдите в каталог проекта в командной строке и инициализируйте git.

$ git init

Теперь вы почти готовы к первому выходу на Github. Диаграмма ниже просто суммирует все шаги, которые вы прошли до сих пор.

7. Зафиксируйте установку проекта.

$ git add . 
$ git commit -m 'Init the project'

8. Создайте основную ветку в локальном репозитории.

$ git branch -M main

Если вы, как и я, задаетесь вопросом о флаге «-M», я могу просто сказать, что он переименовывает master в main. Если вы хотите разобраться с флагом -M, пожалуйста, обратитесь к ссылке ниже.

9. Перейдите на github.com и создайте репозиторий.

Создайте удаленный репозиторий для проекта в Github. Если у вас нет учетной записи, вам нужно сначала зарегистрироваться.

10. Подключите локальный репозиторий к удаленному.

После создания репозитория нажмите кнопку code и скопируйте ссылку. В командной строке убедитесь, что вы находитесь в директории проекта, и введите следующий код.

$ git add origin <YOUR LINK HERE> 

11. Push to Github

Переместите проект в удаленное хранилище. Хотите узнать больше о флаге -u? Пожалуйста, ознакомьтесь со ссылкой ниже.

$ git push -u origin main 

Начиная с шага 12, мы будем настраивать серверную часть.

12. Запустите npm init в директории сервера.

В командной строке убедитесь, что вы находитесь в директории сервера, и инициализируйте npm.

npm init -y

13. Измените файл package.json

Если вы хотите использовать import вместо require, добавьте "type": "module" в package.json, как показано ниже.

14. Создайте файл server.js и установите Express.js

В директории сервера создайте файл server.js и установите Express.js.

npm install express

15. Настроим сервер.

```javascript
import express from "express";

const app = express();

app.get("/", (req, res) => {
  res.send("connected");
});

const port = process.env.PORT || 5000;
app.listen(port, () => {
  console.log("Server listening the port http://localhost/" + port);
});
```

[Подробнее для чтения]

• Что такое флаг -M в git branch -M main.
• Что делает команда Linux rm -rf?
• Что такое флаг -u?