├── public ├── favicon.ico ├── logo192.png ├── logo512.png ├── robots.txt ├── manifest.json ├── 404.html └── index.html ├── assets ├── how-it-works.png ├── deploy-status.png ├── repo-settings.png ├── template-step-1.png ├── template-step-2.png ├── gh-actions-perm-1.png └── gh-actions-perm-2.png ├── jsconfig.json ├── .editorconfig ├── .prettierrc.json ├── src ├── index.js ├── components │ └── App.jsx └── index.css ├── .gitignore ├── .github └── workflows │ └── deploy.yml ├── package.json ├── README.en.md ├── README.es.md ├── README.md └── README.pl.md /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luxplanjay/react-645/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luxplanjay/react-645/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luxplanjay/react-645/HEAD/public/logo512.png -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /assets/how-it-works.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luxplanjay/react-645/HEAD/assets/how-it-works.png -------------------------------------------------------------------------------- /assets/deploy-status.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luxplanjay/react-645/HEAD/assets/deploy-status.png -------------------------------------------------------------------------------- /assets/repo-settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luxplanjay/react-645/HEAD/assets/repo-settings.png -------------------------------------------------------------------------------- /assets/template-step-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luxplanjay/react-645/HEAD/assets/template-step-1.png -------------------------------------------------------------------------------- /assets/template-step-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luxplanjay/react-645/HEAD/assets/template-step-2.png -------------------------------------------------------------------------------- /assets/gh-actions-perm-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luxplanjay/react-645/HEAD/assets/gh-actions-perm-1.png -------------------------------------------------------------------------------- /assets/gh-actions-perm-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luxplanjay/react-645/HEAD/assets/gh-actions-perm-2.png -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "src" 4 | }, 5 | "include": ["src"] 6 | } 7 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | trim_trailing_whitespace = true 8 | insert_final_newline = true 9 | charset = utf-8 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 80, 3 | "tabWidth": 2, 4 | "useTabs": false, 5 | "semi": true, 6 | "singleQuote": true, 7 | "trailingComma": "es5", 8 | "bracketSpacing": true, 9 | "jsxBracketSameLine": false, 10 | "arrowParens": "avoid", 11 | "proseWrap": "always" 12 | } 13 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import { App } from 'components/App'; 4 | import './index.css'; 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | 10 | ); 11 | -------------------------------------------------------------------------------- /src/components/App.jsx: -------------------------------------------------------------------------------- 1 | export const App = () => { 2 | return ( 3 |
13 | React homework template1 14 |
15 | ); 16 | }; 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | #Junk 4 | .vscode/ 5 | .idea/ 6 | 7 | # dependencies 8 | /node_modules 9 | /.pnp 10 | .pnp.js 11 | 12 | # testing 13 | /coverage 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | .env.local 21 | .env.development.local 22 | .env.test.local 23 | .env.production.local 24 | 25 | npm-debug.log* 26 | yarn-debug.log* 27 | yarn-error.log* 28 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @import-normalize; /* bring in normalize.css styles */ 2 | 3 | body { 4 | margin: 0; 5 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 6 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 7 | sans-serif; 8 | -webkit-font-smoothing: antialiased; 9 | -moz-osx-font-smoothing: grayscale; 10 | } 11 | 12 | code { 13 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 14 | monospace; 15 | } 16 | -------------------------------------------------------------------------------- /.github/workflows/deploy.yml: -------------------------------------------------------------------------------- 1 | name: Build and deploy to GitHub Pages 2 | 3 | on: 4 | push: 5 | branches: [main] 6 | 7 | jobs: 8 | build-and-deploy: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - name: Checkout 🛎️ 12 | uses: actions/checkout@v2.3.1 13 | 14 | - name: Install, lint, build 🔧 15 | run: | 16 | npm install 17 | npm run lint:js 18 | npm run build 19 | 20 | - name: Deploy 🚀 21 | uses: JamesIves/github-pages-deploy-action@4.1.0 22 | with: 23 | branch: gh-pages 24 | folder: build 25 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-homework-template", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": "https://goitacademy.github.io/react-homework-template/", 6 | "dependencies": { 7 | "@testing-library/jest-dom": "^5.16.3", 8 | "@testing-library/react": "^12.1.4", 9 | "@testing-library/user-event": "^13.5.0", 10 | "react": "^18.1.0", 11 | "react-dom": "^18.1.0", 12 | "react-scripts": "5.0.1", 13 | "web-vitals": "^2.1.3" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject", 20 | "lint:js": "eslint src/**/*.{js,jsx}" 21 | }, 22 | "eslintConfig": { 23 | "extends": [ 24 | "react-app", 25 | "react-app/jest" 26 | ] 27 | }, 28 | "browserslist": { 29 | "production": [ 30 | ">0.2%", 31 | "not dead", 32 | "not op_mini all" 33 | ], 34 | "development": [ 35 | "last 1 chrome version", 36 | "last 1 firefox version", 37 | "last 1 safari version" 38 | ] 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /public/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Single Page Apps for GitHub Pages 6 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 58 | 59 | 60 | 61 | 62 |
63 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /README.en.md: -------------------------------------------------------------------------------- 1 | # React homework template 2 | 3 | This project was created with 4 | [Create React App](https://github.com/facebook/create-react-app). To get 5 | acquainted and configure additional features 6 | [refer to documentation](https://facebook.github.io/create-react-app/docs/getting-started). 7 | 8 | ## Создание репозитория по шаблону 9 | 10 | Используй этот репозиторий организации GoIT как шаблон для создания репозитория 11 | своего проекта. Для этого нажми на кнопку `«Use this template»` и выбери опцию 12 | `«Create a new repository»`, как показано на изображении. 13 | 14 | ![Creating repo from a template step 1](./assets/template-step-1.png) 15 | 16 | На следующем шаге откроется страница создания нового репозитория. Заполни поле 17 | его имени, убедись что репозиторий публичный, после чего нажми кнопку 18 | `«Create repository from template»`. 19 | 20 | ![Creating repo from a template step 2](./assets/template-step-2.png) 21 | 22 | Теперь у тебя есть личный репозиторий проекта, со структурой файлов и папок 23 | репозитория-шаблона. Далее работай с ним как с любым другим личным репозиторием, 24 | клонируй его себе на компьютер, пиши код, делай коммиты и отправляй их на 25 | GitHub. 26 | 27 | ## Подготовка к работе 28 | 29 | 1. Make sure you have an LTS version of Node.js installed on your computer. 30 | [Download and install](https://nodejs.org/en/) if needed. 31 | 2. Install the project's base dependencies with the `npm install` command. 32 | 3. Start development mode by running the `npm start` command. 33 | 4. Go to [http://localhost:3000](http://localhost:3000) in your browser. This 34 | page will automatically reload after saving changes to the project files. 35 | 36 | ## Deploy 37 | 38 | The production version of the project will automatically be linted, built, and 39 | deployed to GitHub Pages, in the `gh-pages` branch, every time the `main` branch 40 | is updated. For example, after a direct push or an accepted pull request. To do 41 | this, you need to edit the `homepage` field in the `package.json` file, 42 | replacing `your_username` and `your_repo_name` with your own, and submit the 43 | changes to GitHub. 44 | 45 | ```json 46 | "homepage": "https://your_username.github.io/your_repo_name/" 47 | ``` 48 | 49 | Next, you need to go to the settings of the GitHub repository (`Settings` > 50 | `Pages`) and set the distribution of the production version of files from the 51 | `/root` folder of the `gh-pages` branch, if this was not done automatically. 52 | 53 | ![GitHub Pages settings](./assets/repo-settings.png) 54 | 55 | ### Deployment status 56 | 57 | The deployment status of the latest commit is displayed with an icon next to its 58 | ID. 59 | 60 | - **Yellow color** - the project is being built and deployed. 61 | - **Green color** - deployment completed successfully. 62 | - **Red color** - an error occurred during linting, build or deployment. 63 | 64 | More detailed information about the status can be viewed by clicking on the 65 | icon, and in the drop-down window, follow the link `Details`. 66 | 67 | ![Deployment status](./assets/deploy-status.png) 68 | 69 | ### Live page 70 | 71 | After some time, usually a couple of minutes, the live page can be viewed at the 72 | address specified in the edited `homepage` property. For example, here is a link 73 | to a live version for this repository 74 | [https://goitacademy.github.io/react-homework-template](https://goitacademy.github.io/react-homework-template). 75 | 76 | If a blank page opens, make sure there are no errors in the `Console` tab 77 | related to incorrect paths to the CSS and JS files of the project (**404**). You 78 | most likely have the wrong value for the `homepage` property in the 79 | `package.json` file. 80 | 81 | ### Routing 82 | 83 | If your application uses the `react-router-dom` library for routing, you must 84 | additionally configure the `` component by passing the exact name 85 | of your repository in the `basename` prop. Slashes at the beginning and end of 86 | the line are required. 87 | 88 | ```jsx 89 | 90 | 91 | 92 | ``` 93 | 94 | ## How it works 95 | 96 | ![How it works](./assets/how-it-works.png) 97 | 98 | 1. After each push to the `main` branch of the GitHub repository, a special 99 | script (GitHub Action) is launched from the `.github/workflows/deploy.yml` 100 | file. 101 | 2. All repository files are copied to the server, where the project is 102 | initialized and linted and built before deployment. 103 | 3. If all steps are successful, the built production version of the project 104 | files is sent to the `gh-pages` branch. Otherwise, the script execution log 105 | will indicate what the problem is. 106 | -------------------------------------------------------------------------------- /README.es.md: -------------------------------------------------------------------------------- 1 | # React homework template 2 | 3 | Este proyecto fue creado con la ayuda de 4 | [Create React App](https://github.com/facebook/create-react-app). 5 | [Consulte la documentación](https://facebook.github.io/create-react-app/docs/getting-started) 6 | para familiarizarse con las funciones opcionales y configurarlas. 7 | 8 | ## Создание репозитория по шаблону 9 | 10 | Используй этот репозиторий организации GoIT как шаблон для создания репозитория 11 | своего проекта. Для этого нажми на кнопку `«Use this template»` и выбери опцию 12 | `«Create a new repository»`, как показано на изображении. 13 | 14 | ![Creating repo from a template step 1](./assets/template-step-1.png) 15 | 16 | На следующем шаге откроется страница создания нового репозитория. Заполни поле 17 | его имени, убедись что репозиторий публичный, после чего нажми кнопку 18 | `«Create repository from template»`. 19 | 20 | ![Creating repo from a template step 2](./assets/template-step-2.png) 21 | 22 | Теперь у тебя есть личный репозиторий проекта, со структурой файлов и папок 23 | репозитория-шаблона. Далее работай с ним как с любым другим личным репозиторием, 24 | клонируй его себе на компьютер, пиши код, делай коммиты и отправляй их на 25 | GitHub. 26 | 27 | ## Подготовка к работе 28 | 29 | 1. Asegúrate de que la versión LTS de Node.js está instalada en tu computador. 30 | [Descárguela e instálela](https://nodejs.org/en/) de ser necesario. 31 | 2. Instala las dependencias base del proyecto con el comando `npm install`. 32 | 3. Inicia el modo de desarrollo ejecutando el comando `npm start`. 33 | 4. En tu navegador, ve a la dirección 34 | [http://localhost:3000](http://localhost:3000). Esta página se recargará 35 | automáticamente después de guardar los cambios en los archivos del proyecto. 36 | 37 | ## Implementación 38 | 39 | La versión de producción del proyecto se verificará, compilará y desplegará 40 | automáticamente en GitHub Pages, en la rama `gh-pages`, cada vez que se 41 | actualice la rama `main`. Por ejemplo, después de un Push directo o de una 42 | Pool-request aceptada. Para ello, edita el campo `homepage` del archivo 43 | `package.json`, sustituyendo `your_username` y `your_repo_name` por los tuyos 44 | propios, y envía los cambios a GitHub. 45 | 46 | ```json 47 | "homepage": "https://your_username.github.io/your_repo_name/" 48 | ``` 49 | 50 | A continuación, ve a la configuración del repositorio de GitHub (`Settings` > 51 | `Pages`) y selecciona distribuir la versión de producción de los archivos desde 52 | la carpeta `/root` de la rama `gh-pages`, si no se ha hecho automáticamente. 53 | 54 | ![GitHub Pages settings](./assets/repo-settings.png) 55 | 56 | ### Estado de la implantación 57 | 58 | El estado del último commit se indica con un icono junto al ID del commit. 59 | 60 | - **Color amarillo** - el proyecto está compilado e implementado. 61 | - **Color verde** - La implementación se completó con éxito. 62 | - **Color rojo** - Se ha producido un error durante la verificación, la 63 | compilación o la implementación 64 | 65 | Se puede ver información de estado más detallada haciendo clic en el icono y en 66 | la ventana desplegable del enlace `Detalles`. 67 | 68 | ![Deployment status](./assets/deploy-status.png) 69 | 70 | ### Página activa 71 | 72 | Después de un tiempo, normalmente un par de minutos, la página real se puede ver 73 | en la dirección especificada en la propiedad `homepage`. Por ejemplo, aquí está 74 | el enlace a la versión activa de este repositorio 75 | [https://goitacademy.github.io/react-homework-template](https://goitacademy.github.io/react-homework-template). 76 | 77 | Si se abre una página en blanco, asegúrate de que no haya errores en la pestaña 78 | `Console` relacionados con rutas incorrectas de archivos CSS y JS del proyecto 79 | (**404**). Probablemente tienes un valor incorrecto para la propiedad `homepage` 80 | en el archivo `package.json`. 81 | 82 | ### Enrutamiento 83 | 84 | Si la aplicación utiliza la librería `react-router-dom` para el enrutamiento, el 85 | componente `` debe ser configurado adicionalmente pasando en la 86 | prop `basename`, el nombre exacto de tu repositorio. Las barras inclinadas al 87 | principio y al final de la cadena son obligatorias. 88 | 89 | ```jsx 90 | 91 | 92 | 93 | ``` 94 | 95 | ## ¿Cómo funciona? 96 | 97 | ![How it works](./assets/how-it-works.png) 98 | 99 | 1. Después de cada push a la rama `main` del repositorio GitHub, se ejecuta un 100 | script especial (GitHub Action) del archivo `.github/workflows/deploy.yml`. 101 | 2. Todos los archivos del repositorio se copian en el servidor, donde el 102 | proyecto se inicializa, se verifica y se compila antes de ser implementado. 103 | 3. Si todos los pasos tienen éxito, la versión de producción compilada de los 104 | archivos del proyecto se envía a la rama `gh-pages`. De lo contrario, el 105 | registro de ejecución del script indicará cuál es el problema. 106 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React homework template 2 | 3 | Этот проект был создан при помощи 4 | [Create React App](https://github.com/facebook/create-react-app). Для знакомства 5 | и настройки дополнительных возможностей 6 | [обратись к документации](https://facebook.github.io/create-react-app/docs/getting-started). 7 | 8 | ## Создание репозитория по шаблону 9 | 10 | Используй этот репозиторий организации GoIT как шаблон для создания репозитория 11 | своего проекта. Для этого нажми на кнопку `«Use this template»` и выбери опцию 12 | `«Create a new repository»`, как показано на изображении. 13 | 14 | ![Creating repo from a template step 1](./assets/template-step-1.png) 15 | 16 | На следующем шаге откроется страница создания нового репозитория. Заполни поле 17 | его имени, убедись что репозиторий публичный, после чего нажми кнопку 18 | `«Create repository from template»`. 19 | 20 | ![Creating repo from a template step 2](./assets/template-step-2.png) 21 | 22 | После того как репозиторий будет создан, необходимо перейти в настройки 23 | созданного репозитория на вкладку `Settings` > `Actions` > `General` как 24 | показано на изображении. 25 | 26 | ![Settings GitHub Actions permissions step 1](./assets/gh-actions-perm-1.png) 27 | 28 | Проскролив страницу до самого конца, в секции `«Workflow permissions»` выбери 29 | опцию `«Read and write permissions»` и поставь галочку в чекбоксе. Это 30 | необходимо для автоматизации процесса деплоя проекта. 31 | 32 | ![Settings GitHub Actions permissions step 2](./assets/gh-actions-perm-2.png) 33 | 34 | Теперь у тебя есть личный репозиторий проекта, со структурой файлов и папок 35 | репозитория-шаблона. Далее работай с ним как с любым другим личным репозиторием, 36 | клонируй его себе на компьютер, пиши код, делай коммиты и отправляй их на 37 | GitHub. 38 | 39 | ## Подготовка к работе 40 | 41 | 1. Убедись что на компьютере установлена LTS-версия Node.js. 42 | [Скачай и установи](https://nodejs.org/en/) её если необходимо. 43 | 2. Установи базовые зависимости проекта командой `npm install`. 44 | 3. Запусти режим разработки, выполнив команду `npm start`. 45 | 4. Перейди в браузере по адресу [http://localhost:3000](http://localhost:3000). 46 | Эта страница будет автоматически перезагружаться после сохранения изменений в 47 | файлах проекта. 48 | 49 | ## Деплой 50 | 51 | Продакшн версия проекта будет автоматически проходить линтинг, собираться и 52 | деплоиться на GitHub Pages, в ветку `gh-pages`, каждый раз когда обновляется 53 | ветка `main`. Например, после прямого пуша или принятого пул-реквеста. Для этого 54 | необходимо в файле `package.json` отредактировать поле `homepage`, заменив 55 | `your_username` и `your_repo_name` на свои, и отправить изменения на GitHub. 56 | 57 | ```json 58 | "homepage": "https://your_username.github.io/your_repo_name/" 59 | ``` 60 | 61 | Далее необходимо зайти в настройки GitHub-репозитория (`Settings` > `Pages`) и 62 | выставить раздачу продакшн версии файлов из папки `/root` ветки `gh-pages`, если 63 | это небыло сделано автоматически. 64 | 65 | ![GitHub Pages settings](./assets/repo-settings.png) 66 | 67 | ### Статус деплоя 68 | 69 | Статус деплоя крайнего коммита отображается иконкой возле его идентификатора. 70 | 71 | - **Желтый цвет** - выполняется сборка и деплой проекта. 72 | - **Зеленый цвет** - деплой завершился успешно. 73 | - **Красный цвет** - во время линтинга, сборки или деплоя произошла ошибка. 74 | 75 | Более детальную информацию о статусе можно посмотреть кликнув по иконке, и в 76 | выпадающем окне перейти по ссылке `Details`. 77 | 78 | ![Deployment status](./assets/deploy-status.png) 79 | 80 | ### Живая страница 81 | 82 | Через какое-то время, обычно пару минут, живую страницу можно будет посмотреть 83 | по адресу указанному в отредактированном свойстве `homepage`. Например, вот 84 | ссылка на живую версию для этого репозитория 85 | [https://goitacademy.github.io/react-homework-template](https://goitacademy.github.io/react-homework-template). 86 | 87 | Если открывается пустая страница, убедись что во вкладке `Console` нет ошибок 88 | связанных с неправильными путями к CSS и JS файлам проекта (**404**). Скорее 89 | всего у тебя неправильное значение свойства `homepage` в файле `package.json`. 90 | 91 | ### Маршрутизация 92 | 93 | Если приложение использует библиотеку `react-router-dom` для маршрутизации, 94 | необходимо дополнительно настроить компонент ``, передав в пропе 95 | `basename` точное название твоего репозитория. Слеш в начале строки обязателен. 96 | 97 | ```jsx 98 | 99 | 100 | 101 | ``` 102 | 103 | ## Как это работает 104 | 105 | ![How it works](./assets/how-it-works.png) 106 | 107 | 1. После каждого пуша в ветку `main` GitHub-репозитория, запускается специальный 108 | скрипт (GitHub Action) из файла `.github/workflows/deploy.yml`. 109 | 2. Все файлы репозитория копируются на сервер, где проект инициализируется и 110 | проходит линтинг и сборку перед деплоем. 111 | 3. Если все шаги прошли успешно, собранная продакшн версия файлов проекта 112 | отправляется в ветку `gh-pages`. В противном случае, в логе выполнения 113 | скрипта будет указано в чем проблема. 114 | -------------------------------------------------------------------------------- /README.pl.md: -------------------------------------------------------------------------------- 1 | **Read in other languages: [rosyjski](README.md), [polski](README.pl.md).** 2 | 3 | # React homework template 4 | 5 | Ten projekt został stworzony przy pomocy 6 | [Create React App](https://github.com/facebook/create-react-app). W celu 7 | zapoznania się z konfiguracją dodatkowych opcji 8 | [zobacz dokumentację](https://facebook.github.io/create-react-app/docs/getting-started). 9 | 10 | ## Utworzenie repozytorium zgodnie z szablonem 11 | 12 | Wykorzystaj to repozytorium organizacji GoIT jako szablon do utworzenia 13 | repozytorium własnego projektu. W tym celu kliknij na przycisk 14 | `"Use this template"` i wybierz opcję `"Create a new repository"`, jak pokazano 15 | na rysunku. 16 | 17 | ![Creating repo from a template step 1](./assets/template-step-1.png) 18 | 19 | W następnym kroku otworzy się strona utworzenia nowego repozytorium. Wypełnij 20 | pole nazwy i upewnij się, że repozytorium jest publiczne, a następnie kliknij na 21 | przycisk `"Create repository from template"`. 22 | 23 | ![Creating repo from a template step 2](./assets/template-step-2.png) 24 | 25 | Po utworzeniu repozytorium, należy przejść do jego ustawień w zakładce `Settings` > `Actions` > `General`, jak pokazano na rysunku. 26 | 27 | ![Settings GitHub Actions permissions step 1](./assets/gh-actions-perm-1.png) 28 | 29 | Przescrolluj stronę do samego końca, w sekcji `«Workflow permissions»` wybierz opcję `«Read and write permissions»` i zaznacz pole w checkboksie. Jest to niezbędne do automatyzacji procesu deploymentu projektu. 30 | 31 | ![Settings GitHub Actions permissions step 2](./assets/gh-actions-perm-2.png) 32 | 33 | Teraz masz własne repozytorium projektu, ze strukturą folderów i plików jak w 34 | szablonie. Pracuj z nim jak z innymi repozytoriami, klonuj je na swój komputer, 35 | pisz kod, rób commity i wysyłaj na GitHub. 36 | 37 | ## Przygotowanie do pracy 38 | 39 | 1. Upewnij się, że na komputerze zainstalowana jest wersja LTS Node.js. 40 | [Ściągnij i zainstaluj](https://nodejs.org/en/), jeżeli trzeba. 41 | 2. Utwórz bazowe zależności projektu przy pomocy polecenia `npm install`. 42 | 3. Włącz tryb pracy, wykonując polecenie `npm start`. 43 | 4. Przejdź w przeglądarce pod adres 44 | [http://localhost:3000](http://localhost:3000). Ta strona będzie 45 | automatycznie przeładowywać się po zapisaniu zmian w plikach projektu. 46 | 47 | ## Deployment 48 | 49 | Produkcyjna wersja projektu będzie automatycznie poddana pracy lintera, budowana 50 | i deployowana na GitHub Pages, w gałęzi `gh-pages` za każdym razem, gdy 51 | aktualizuje się gałąź `main`, na przykład po bezpośrednim pushu lub przyjętym 52 | pull requeście. W tym celu należy w pliku `package.json` zredagować pole 53 | `homepage`, zamieniając `your_username` i `your_repo_name` na swoje nazwy i 54 | wysłać zmiany do GitHub. 55 | 56 | ```json 57 | "homepage": "https://your_username.github.io/your_repo_name/" 58 | ``` 59 | 60 | Następnie należy przejść do ustawień repozytorium GitHub (`Settings` > `Pages`) 61 | i wydystrybuować wersję produkcyjną plików z folderu `/root` gałęzi `gh-pages`, 62 | jeśli nie zostało to wykonane automatycznie. 63 | 64 | ![GitHub Pages settings](./assets/repo-settings.png) 65 | 66 | ### Status deploymentu 67 | 68 | Status deploymentu ostatniego commitu wyświetla się jako ikona obok jego 69 | identyfikatora. 70 | 71 | - **Żółty kolor** - wykonuje się zbudowanie i deployment projektu. 72 | - **Zielony kolor** - deploymnt zakończył się sukcesem. 73 | - **Czerwony kolor** - podczas pracy lintera, budowania lub deploymentu wystąpił 74 | błąd. 75 | 76 | Bardziej szczegółowe informacje o statusie można zobaczyć po kliknięciu na 77 | ikonkę i przejściu w wyskakującym oknie do odnośnika `Details`. 78 | 79 | ![Deployment status](./assets/deploy-status.png) 80 | 81 | ### Deployowana strona 82 | 83 | Po jakimś czasie, zazwyczaj kilku minut, zdeployowaną stronę będzie można 84 | zobaczyć pod adresem wskazanym w zredagowanej właściwości `homepage`. Tutaj na 85 | przykład znajduje się odnośnik do zdeployowanej strony w wersji dla tego 86 | repozytorium 87 | [https://goitacademy.github.io/react-homework-template](https://goitacademy.github.io/react-homework-template). 88 | 89 | Jeżeli otwiera się pusta strona, upewnij się, że w zakładce `Console` nie ma 90 | błędów związanych z nieprawidłowymi ścieżkami do plików CSS i JS projektu 91 | (**404**). Najprawdopodobniej wprowadzona została niewłaściwa wartość 92 | właściwości `homepage` w pliku `package.json`. 93 | 94 | ### Trasowanie 95 | 96 | Jeżeli aplikacja wykorzystuje bibliotekę `react-router-dom` dla trasowania, 97 | należy uzupełniająco skonfigurować komponent ``, przekazując w 98 | propsie `basename` dokładną nazwę twojego repozytorium. Slash na początku i na 99 | końcu łańcucha jest obowiązkowy. 100 | 101 | ```jsx 102 | 103 | 104 | 105 | ``` 106 | 107 | ## Jak to działa 108 | 109 | ![How it works](./assets/how-it-works.png) 110 | 111 | 1. Po każdym pushu do gałęzi `main` repozytorium GitHub, uruchamia się specjalny 112 | skrypt (GitHub Action) z pliku `.github/workflows/deploy.yml`. 113 | 2. Wszystkie pliki repozytorium kopiują się na serwer, gdzie projekt zostaje 114 | zainicjowany i przechodzi pracę lintera oraz zbudowanie przed deploymentem. 115 | 3. Jeżeli wszystkie kroki zakończyły się sukcesem, zbudowana wersja produkcyjna 116 | plików projektu wysyłana jest do gałęzi `gh-pages`. W przeciwnym razie, w 117 | logu wykonania skryptu zostanie wskazane z czym jest problem. 118 | --------------------------------------------------------------------------------