Настройка на React приложение

React, ReactJS или React.js е популярна JavaScript библиотека за създаване на интерактивни потребителски интерфейси. Той може да се инсталира изключително лесно чрез една SSH команда, след като сте влезли във Вашия проект чрез sureapp CLI инструмента:

npm install react
Важно: Ако нямате раздел "WebApps" във Вашия Контролен панел, тогава инструкциите в тази статия не са валидни за Вашия акаунт и сървър. Можете да се свържете с нашия екип за повече информация и съдействие.

В тази статия ще Ви покажем как да настроите и създадете примерно React приложение (калкулатор), използвайки npm и serve. Можете да използвате същите стъпки и за инсталиране на най-актуалното ръководство за React - морски шах.

За целта трябва да се свържете към Вашия акаунт чрез SSH и да следвате тези стъпки:

1. Създайте директорията, в която желаете да инсталирате файловете на React приложението (напр. "~/private/react-calculator") и влезте в тази директория, като използвате следната команда:
   
   mkdir /home/$USER/private/react-calculator && cd /home/$USER/private/react-calculator
2. Изтеглете файловете за примерното React приложение от GitHub в новосъздадената директория:
   
   git clone https://github.com/andrewagain/calculator.git "/home/$USER/private/react-calculator"
3. Създайте WebApps проект за React калкулатора с име "react-calculator" чрез следната команда на sureapp CLI инструмента:
   
   sureapp project create \
   --engine node \
   --engine-version lts \
   --release-dir "/home/$USER/private/react-calculator" \
   react-calculator
   
4. Влезте в WebApps проекта със следната sureapp CLI команда:
   
   sureapp project shell react-calculator
5. Използвайте следната команда, за да се инсталират всички необходими за проекта Node.js пакети:
   
   npm install
   Процесът може да отнеме повече време.
   
   
6. Тъй като даденият пример в проекта използва остарял протокол, добавете поддръжка за него с тези команди в конзолата:
   
   sed -i 's~^    "build": "react-scripts build",~    "build": "react-scripts --openssl-legacy-provider build",~g' package.jsonsed -i 's~^    "start": "react-scripts start",~    "start": "react-scripts --openssl-legacy-provider start",~g' package.json
7. Изпълнете следната команда, за да стартирате тестов сървър за React калкулатора:
   
   npm start
8. Изберете страницата, на която да е достъпен React калкулатора, в раздел "WebApps" на хостинг Контролния панел. Можете да направите това, като кликнете на бутона с иконка на молив () до проекта "react-calculator" и изберете домейна и поддомейна чрез съответните падащи менюта в показалия се екран.
   
   
   
   
   
   За да запазите промените, използвайте бутона "Промени".
   
   
9. Oтворете избрания в предишната стъпка адрес на проекта (напр. http://calculator.example.com), като можете директно да използвате линка от колоната "Адрес" на Вашия React проект. Трябва да бъдете пренасочени към страница с калкулатор.
   
   
   
   
10. След като сте се уверили, че Вашият проект е успешен и калкулаторът работи, отново се върнете в конзолата на Вашия WebApps проект и спрете тестовия сървър. Можете да направите това, като спрете SSH командата за тестовия сървър с комбинацията от клавиши Ctrl+C.
    
    
11. За да стартирате продуктов сървър за проект, трябва първо да промените адреса на калкулатора ("homepage") във файла package.json на проекта от "http://ahfarmer.github.io/calculator" на адреса, който сте избрали за WebApps проекта. Ако проектът Ви използва адрес "http://calculator.example.com", тогава въведете него.
    
    С командата по-долу настройваме "/" за адрес, тъй като желаем винаги да се зарежда калкулатора, дори и при опит за отваряне на несъществуващ файл или директория на адреса на проекта:
    
    sed -i 's~^  "homepage": "http://ahfarmer.github.io/calculator",~  "homepage": "/",~g' package.json
12. Създайте статично копие на сайта със следната команда:
    
    npm run build
13. Инсталирайте "serve" Node.js пакета и пуснете продуктов сървър със следните команди:
    
    npm install -g serveserve -s build
14. Отново отворете адреса на проекта (напр. http://calculator.example.com), като можете директно да използвате линка от колоната "Адрес" на Вашия React проект от раздел "WebApps" на хостинг Контролния панел. Ако приложението работи правилно, можете да спрете продуктовия сървър чрез комбинацията от клавишите Ctrl+C.
    
    
15. Настройте командата "serve -s build" като стартова команда за Вашия React проект и активирайте приложението. Можете да направите това от раздел "WebApps" на хостинг Контролния панел или чрез следните команди на sureapp CLI инструмента:
    
    sureapp project modify --start-cmd "serve -s build"sureapp service manage --enable