NodeJS - создание React framework через среду Vite на Ubuntu 20.04: различия между версиями
Материал из Wiki - Iphoster - the best ever hosting and support. 2005 - 2024
Admin iph (обсуждение | вклад) (Новая страница: «=== NodeJS - создание React framework через среду Vite на Ubuntu 20.04 === Установка nodejs + пакетный менеджер yar...») |
Admin iph (обсуждение | вклад) |
||
(не показаны 2 промежуточные версии этого же участника) | |||
Строка 1: | Строка 1: | ||
+ | [[Файл:B_1.gif |link=https://bit.ly/3tbFsd6| Доступная цена]] | ||
+ | |||
=== NodeJS - создание React framework через среду Vite на Ubuntu 20.04 === | === NodeJS - создание React framework через среду Vite на Ubuntu 20.04 === | ||
Строка 69: | Строка 71: | ||
$ yarn run dev | $ yarn run dev | ||
− | Запустить проект | + | Запустить проект на всех IP сервера: |
$ yarn run dev --host | $ 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)) | ||
Строка 84: | Строка 93: | ||
Создаем 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 ( | ||
<> | <> | ||
Строка 90: | Строка 99: | ||
</> | </> | ||
); | ); | ||
− | } | + | }</nowiki> |
Текущая версия на 20:40, 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.