NodeJS - создание React framework через среду Vite на Ubuntu 20.04: различия между версиями

Материал из Wiki - Iphoster - the best ever hosting and support. 2005 - 2023
Перейти к:навигация, поиск
Строка 91: Строка 91:
 
Создаем App.jsx с содержимым Hello World:
 
Создаем App.jsx с содержимым Hello World:
 
  $ vi App.jsx
 
  $ vi App.jsx
  export default function App() {
+
  <nowiki>export default function App() {
 
   return (
 
   return (
 
     <>
 
     <>
Строка 97: Строка 97:
 
     </>
 
     </>
 
   );
 
   );
}
+
}</nowiki>
  
  

Версия 20:39, 29 мая 2022

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 "[email protected]" 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.