a-sharapov / react-blueprint

Dummy React App with initial settings

< React Blueprint 2022 />

👆 Особенности

🧊 Cборка включает в себя:

• TypeScript;
• Менеджер состояний Recoil;
• Routing;
• React Helmet;
• ESLint и Prettier;
• Vite;
• VitePWA (WorkBox);

🗺️ Топология проекта:

• assets: статические ресурсы, применяемые в компонентах
• atoms: переменные менеджера состояний
• components: переиспольюзуемые компоненты приложения
• interfaces: описания интерфейсов изолированных сущностей
• layouts: компоненты для отображения приложения
• selectors: селекторы менеджера состояний, зависящие от атомов
• services: сервисы, применяемые в компонентах
• utils: утилиты для работы с данными
• views: компоненты постраничного отображения

🔌 Переменные окружения (.env)

VITE_APP_NAME="Vite React Blueprint"
VITE_APP_NAME_SHORT="Blueprint"
VITE_APP_DESCRIPTION="Dummy description"
VITE_APP_THEME_COLOR="#00bcd4"
VITE_APP_BACKGROUND_COLOR="#efefef"
VITE_BUILD_VERSION=0.0.1
VITE_APP_PORT=3000
VITE_ROOT_PATH=./
VITE_PUBLIC_PATH=./public
VITE_OUTPUT_PATH=./dist
VITE_PWA_DEV_OPTIONS_ENABLED=true

📑 ESLint

npm run lint

⚙️ Запуск

Docker

✅ (Рекомендуется)

docker build -t react_blueprint ./ --no-cache

docker run -p 3000:3000 -t -v "$(pwd)/src:/usr/reactapp/src" -v "$(pwd)/public:/usr/reactapp/public" -e CHOKIDAR_USEPOLLING=true react_blueprint

В вашей системе

⚠️ (Не рекомендуется)

npm run start

🧰 Сборка

Доступна сборка приложения в Docker

• в корне необходимо создать папку dist, в неё будет помещён результат сборки
• в последней строчке Dockerfile заменить директиву "start" на "build", чтобы строка выглядела следующим образом:

CMD ["npm", "run", "build"] 

• после этого выполнить сборку контейнера и запустить его

docker build -t react_blueprint ./ --no-cache

docker run -p 3000:3000 -t -v "$(pwd)/src:/usr/reactapp/src" -v "$(pwd)/public:/usr/reactapp/public" -v "$(pwd)/dist:/usr/reactapp/dist" -e CHOKIDAR_USEPOLLING=true react_blueprint

Результат сборки окажется в папке dist вашего проекта.