NodeJS - создание React framework через среду Vite на Ubuntu 20.04

NodeJS - создание React framework через среду Vite на Ubuntu 20.04

Установка nodejs + пакетный менеджер yarn:

# apt install 
# curl -sL install-node.now.sh/lts | bash
# npm install -g yarn

Проверка версий

# node -v
v16.15.0
# yarn --version
1.22.18

Установка nginx + certbot для привязки виртуального хоста:

# apt install nginx python3-certbot-nginx -y
# vi /etc/nginx/sites-available/myapp
server {
  listen 80;
  server_name site.ru www.site.ru;
  location / {
      include proxy_params;
      proxy_pass http://localhost:3000/;
  }
}
# ln -s /etc/nginx/sites-available/myapp /etc/nginx/sites-enabled/
# systemctl restart nginx

Ставим SSL Let's Encrypt и делаем редирект http --> https:

# certbot --nginx -d site.ru -d www.site.ru
# systemctl restart nginx

Добавляем пользователя и заходим под ним:

# adduser user1
# su -l user1 -s /bin/bash
$ cd ~

Создание проекта

~$ yarn create vite
yarn create v1.22.18
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
warning Your current version of Yarn is out of date. The latest version is "1.22.19", while you're on "1.22.18".
info To upgrade, run the following command:
$ curl --compressed -o- -L https://yarnpkg.com/install.sh | bash
success Installed "create-vite@2.9.4" with binaries:
     - create-vite
     - cva
✔ Project name: … vite-project1
✔ Select a framework: › react
✔ Select a variant: › react
Scaffolding project in /home/user1/vite-project1...
 Done. Now run:
 cd vite-project1
 yarn
 yarn dev
Done in 71.36s.

Переходим в папку проекта и ставим зависимости через yarn:

$ cd vite-project1
$ yarn

Запустить проект только на localhost

$ yarn run dev

Запустить проект на всех IP сервера:

$ yarn run dev --host

Запустить проект на всех IP сервера в фоновом режиме:

$ yarn run dev --host &

Проверка - запустилось ли приложение на 3000 порту

$ ss -plunt | grep node
tcp     LISTEN   0        511                    *:3000                *:*       users:(("node",pid=36514,fd=19))

Удаляем все файлы из /src/ кроме main.jsx

$ shopt -s extglob
$ cd src/
$ rm -v !("main.jsx")

в main.jsx удаляем строку import './index.css'

$ vi main.jsx
import './index.css'

Создаем App.jsx с содержимым Hello World:

$ vi App.jsx
export default function App() {
  return (
    <>
      <div>Hello World</div>
    </>
  );
 }

Построить приложение через yarn:

$ cd ..
~/vite-project1$ yarn run build
yarn run v1.22.18
$ vite build
vite v2.9.9 building for production...
✓ 31 modules transformed.
dist/index.html                 0.38 KiB
dist/assets/index.08c93fc6.js   139.70 KiB / gzip: 44.78 KiB
Done in 3.01s.