https://iphwiki.net/index.php?title=NodeJS_-_%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_React_framework_%D1%87%D0%B5%D1%80%D0%B5%D0%B7_%D1%81%D1%80%D0%B5%D0%B4%D1%83_Vite_%D0%BD%D0%B0_Ubuntu_20.04&feed=atom&action=history
NodeJS - создание React framework через среду Vite на Ubuntu 20.04 - История изменений
2024-03-28T17:12:11Z
История изменений этой страницы в вики
MediaWiki 1.35.0
https://iphwiki.net/index.php?title=NodeJS_-_%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_React_framework_%D1%87%D0%B5%D1%80%D0%B5%D0%B7_%D1%81%D1%80%D0%B5%D0%B4%D1%83_Vite_%D0%BD%D0%B0_Ubuntu_20.04&diff=12074&oldid=prev
Admin iph в 20:40, 29 мая 2022
2022-05-29T20:40:13Z
<p></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="ru">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Предыдущая</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Версия 20:40, 29 мая 2022</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1" >Строка 1:</td>
<td colspan="2" class="diff-lineno">Строка 1:</td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">[[Файл:B_1.gif |link=https://bit.ly/3tbFsd6| Доступная цена]]</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=== NodeJS - создание React framework через среду Vite на Ubuntu 20.04 ===</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=== NodeJS - создание React framework через среду Vite на Ubuntu 20.04 ===</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
</table>
Admin iph
https://iphwiki.net/index.php?title=NodeJS_-_%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_React_framework_%D1%87%D0%B5%D1%80%D0%B5%D0%B7_%D1%81%D1%80%D0%B5%D0%B4%D1%83_Vite_%D0%BD%D0%B0_Ubuntu_20.04&diff=12073&oldid=prev
Admin iph в 20:39, 29 мая 2022
2022-05-29T20:39:44Z
<p></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="ru">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Предыдущая</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Версия 20:39, 29 мая 2022</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l91" >Строка 91:</td>
<td colspan="2" class="diff-lineno">Строка 91:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Создаем App.jsx с содержимым Hello World:</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Создаем App.jsx с содержимым Hello World:</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> $ vi App.jsx</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> $ vi App.jsx</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div> export default function App() {</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> <ins class="diffchange diffchange-inline"><nowiki></ins>export default function App() {</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> return (</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> return (</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <></div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l97" >Строка 97:</td>
<td colspan="2" class="diff-lineno">Строка 97:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> </></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> </></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> );</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> );</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>}</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins class="diffchange diffchange-inline"> </ins>}<ins class="diffchange diffchange-inline"></nowiki></ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
</table>
Admin iph
https://iphwiki.net/index.php?title=NodeJS_-_%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_React_framework_%D1%87%D0%B5%D1%80%D0%B5%D0%B7_%D1%81%D1%80%D0%B5%D0%B4%D1%83_Vite_%D0%BD%D0%B0_Ubuntu_20.04&diff=12072&oldid=prev
Admin iph в 20:38, 29 мая 2022
2022-05-29T20:38:18Z
<p></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="ru">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Предыдущая</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Версия 20:38, 29 мая 2022</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l69" >Строка 69:</td>
<td colspan="2" class="diff-lineno">Строка 69:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> $ yarn run dev</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> $ yarn run dev</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Запустить проект <del class="diffchange diffchange-inline">только </del>на всех IP сервера:</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Запустить проект <ins class="diffchange diffchange-inline"> </ins>на всех IP сервера:</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> $ yarn run dev --host</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> $ yarn run dev --host</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">Запустить проект на всех IP сервера в фоновом режиме:</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"> $ yarn run dev --host &</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">Проверка - запустилось ли приложение на 3000 порту</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"> $ ss -plunt | grep node</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"> tcp LISTEN 0 511 *:3000 *:* users:(("node",pid=36514,fd=19))</ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
</table>
Admin iph
https://iphwiki.net/index.php?title=NodeJS_-_%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_React_framework_%D1%87%D0%B5%D1%80%D0%B5%D0%B7_%D1%81%D1%80%D0%B5%D0%B4%D1%83_Vite_%D0%BD%D0%B0_Ubuntu_20.04&diff=12071&oldid=prev
Admin iph: Новая страница: «=== NodeJS - создание React framework через среду Vite на Ubuntu 20.04 === Установка nodejs + пакетный менеджер yar...»
2022-05-29T20:31:06Z
<p>Новая страница: «=== NodeJS - создание React framework через среду Vite на Ubuntu 20.04 === Установка nodejs + пакетный менеджер yar...»</p>
<p><b>Новая страница</b></p><div>=== NodeJS - создание React framework через среду Vite на Ubuntu 20.04 ===<br />
<br />
<br />
Установка nodejs + пакетный менеджер yarn:<br />
# apt install <br />
# curl -sL install-node.now.sh/lts | bash<br />
# npm install -g yarn<br />
<br />
Проверка версий<br />
# node -v<br />
v16.15.0<br />
# yarn --version<br />
1.22.18<br />
<br />
<br />
Установка nginx + certbot для привязки виртуального хоста:<br />
# apt install nginx python3-certbot-nginx -y<br />
# vi /etc/nginx/sites-available/myapp<br />
server {<br />
listen 80;<br />
server_name site.ru www.site.ru;<br />
location / {<br />
include proxy_params;<br />
proxy_pass http://localhost:3000/;<br />
}<br />
}<br />
# ln -s /etc/nginx/sites-available/myapp /etc/nginx/sites-enabled/<br />
# systemctl restart nginx<br />
<br />
Ставим SSL Let's Encrypt и делаем редирект http --> https:<br />
# certbot --nginx -d site.ru -d www.site.ru<br />
# systemctl restart nginx<br />
<br />
<br />
Добавляем пользователя и заходим под ним:<br />
# adduser user1<br />
# su -l user1 -s /bin/bash<br />
$ cd ~<br />
<br />
<br />
Создание проекта<br />
~$ yarn create vite<br />
yarn create v1.22.18<br />
[1/4] Resolving packages...<br />
[2/4] Fetching packages...<br />
[3/4] Linking dependencies...<br />
[4/4] Building fresh packages...<br />
warning Your current version of Yarn is out of date. The latest version is "1.22.19", while you're on "1.22.18".<br />
info To upgrade, run the following command:<br />
$ curl --compressed -o- -L https://yarnpkg.com/install.sh | bash<br />
success Installed "create-vite@2.9.4" with binaries:<br />
- create-vite<br />
- cva<br />
✔ Project name: … vite-project1<br />
✔ Select a framework: › react<br />
✔ Select a variant: › react<br />
Scaffolding project in /home/user1/vite-project1...<br />
Done. Now run:<br />
cd vite-project1<br />
yarn<br />
yarn dev<br />
Done in 71.36s.<br />
<br />
Переходим в папку проекта и ставим зависимости через yarn:<br />
$ cd vite-project1<br />
$ yarn<br />
<br />
Запустить проект только на localhost<br />
$ yarn run dev<br />
<br />
Запустить проект только на всех IP сервера:<br />
$ yarn run dev --host<br />
<br />
<br />
Удаляем все файлы из /src/ кроме main.jsx<br />
$ shopt -s extglob<br />
$ cd src/<br />
$ rm -v !("main.jsx")<br />
<br />
в main.jsx удаляем строку '''import './index.css''''<br />
$ vi main.jsx<br />
import './index.css'<br />
<br />
Создаем App.jsx с содержимым Hello World:<br />
$ vi App.jsx<br />
export default function App() {<br />
return (<br />
<><br />
<div>Hello World</div><br />
</><br />
);<br />
}<br />
<br />
<br />
Построить приложение через yarn:<br />
$ cd ..<br />
~/vite-project1$ yarn run build<br />
yarn run v1.22.18<br />
$ vite build<br />
vite v2.9.9 building for production...<br />
✓ 31 modules transformed.<br />
dist/index.html 0.38 KiB<br />
dist/assets/index.08c93fc6.js 139.70 KiB / gzip: 44.78 KiB<br />
Done in 3.01s.</div>
Admin iph