diff --git a/README.es.md b/README.es.md deleted file mode 100644 index d8783c1..0000000 --- a/README.es.md +++ /dev/null @@ -1,105 +0,0 @@ -# React homework template - -Este proyecto fue creado con la ayuda de -[Create React App](https://github.com/facebook/create-react-app). -[Consulte la documentación](https://facebook.github.io/create-react-app/docs/getting-started) -para familiarizarse con las funciones opcionales y configurarlas. - -## Crear un repositorio desde una plantilla - -Usa este repositorio de la organización GoIT como plantilla para crear el repositorio de tu proyecto. -Para hacer esto, haz clic en `«Use this template»` y selecciona la opción -`«Create a new repository»`, tal como se muestra en la imagen. - -![Creating repo from a template step 1](./assets/template-step-1.png) - -Para el siguiente paso deberás abrir la página para crear un nuevo repositorio. -Ponle nombre, asegúrate de que el repositorio sea público y haz clic en el botón -`«Create repository from template»`. - -![Creating repo from a template step 2](./assets/template-step-2.png) - -Ahora ya tienes un repositorio de proyecto personal, junto a una estructura de -archivos y carpetas del repositorio de plantillas. Luego trabaja con esto, así -como con cualquier otro repositorio personal, realiza una copia en tu computadora -y súbelo a GitHub. - -## Prepararse para el trabajo - -1. Asegúrate de que la versión LTS de Node.js está instalada en tu computador. - [Descárguela e instálela](https://nodejs.org/en/) de ser necesario. -2. Instala las dependencias base del proyecto con el comando `npm install`. -3. Inicia el modo de desarrollo ejecutando el comando `npm start`. -4. En tu navegador, ve a la dirección - [http://localhost:3000](http://localhost:3000). Esta página se recargará - automáticamente después de guardar los cambios en los archivos del proyecto. - -## Implementación - -La versión de producción del proyecto se verificará, compilará y desplegará -automáticamente en GitHub Pages, en la rama `gh-pages`, cada vez que se -actualice la rama `main`. Por ejemplo, después de un Push directo o de una -Pool-request aceptada. Para ello, edita el campo `homepage` del archivo -`package.json`, sustituyendo `your_username` y `your_repo_name` por los tuyos -propios, y envía los cambios a GitHub. - -```json -"homepage": "https://your_username.github.io/your_repo_name/" -``` - -A continuación, ve a la configuración del repositorio de GitHub (`Settings` > -`Pages`) y selecciona distribuir la versión de producción de los archivos desde -la carpeta `/root` de la rama `gh-pages`, si no se ha hecho automáticamente. - -![GitHub Pages settings](./assets/repo-settings.png) - -### Estado de la implantación - -El estado del último commit se indica con un icono junto al ID del commit. - -- **Color amarillo** - el proyecto está compilado e implementado. -- **Color verde** - La implementación se completó con éxito. -- **Color rojo** - Se ha producido un error durante la verificación, la - compilación o la implementación - -Se puede ver información de estado más detallada haciendo clic en el icono y en -la ventana desplegable del enlace `Detalles`. - -![Deployment status](./assets/deploy-status.png) - -### Página activa - -Después de un tiempo, normalmente un par de minutos, la página real se puede ver -en la dirección especificada en la propiedad `homepage`. Por ejemplo, aquí está -el enlace a la versión activa de este repositorio -[https://goitacademy.github.io/react-homework-template](https://goitacademy.github.io/react-homework-template). - -Si se abre una página en blanco, asegúrate de que no haya errores en la pestaña -`Console` relacionados con rutas incorrectas de archivos CSS y JS del proyecto -(**404**). Probablemente tienes un valor incorrecto para la propiedad `homepage` -en el archivo `package.json`. - -### Enrutamiento - -Si la aplicación utiliza la librería `react-router-dom` para el enrutamiento, el -componente `` debe ser configurado adicionalmente pasando en la -prop `basename`, el nombre exacto de tu repositorio. Las barras inclinadas al -principio y al final de la cadena son obligatorias. - -```jsx - - - -``` - -## ¿Cómo funciona? - -![How it works](./assets/how-it-works.png) - -1. Después de cada push a la rama `main` del repositorio GitHub, se ejecuta un - script especial (GitHub Action) del archivo `.github/workflows/deploy.yml`. -2. Todos los archivos del repositorio se copian en el servidor, donde el - proyecto se inicializa, se verifica y se compila antes de ser implementado. -3. Si todos los pasos tienen éxito, la versión de producción compilada de los - archivos del proyecto se envía a la rama `gh-pages`. De lo contrario, el - registro de ejecución del script indicará cuál es el problema. diff --git a/README.md b/README.md index aae7282..676c2bb 100644 --- a/README.md +++ b/README.md @@ -1,112 +1,2 @@ # React homework template -Цей проект був створений за допомогою -[Create React App](https://github.com/facebook/create-react-app). Для знайомства -і налаштування додаткових можливостей -[звернися до документації](https://facebook.github.io/create-react-app/docs/getting-started). - -## Створення репозиторію за шаблоном - -Використовуй цей репозиторій організації GoIT як шаблон для створення репозиторію -свого проєкта. Для цього натисни на кнопку `«Use this template»` і вибери опцію -`«Create a new repository»`, як показано на зображенні. - -![Creating repo from a template step 1](./assets/template-step-1.png) - -На наступному кроці відкриється сторінка створення нового репозиторію. Заповни поле -його імені, переконайся що репозиторій публічний, після чого натисни кнопку -`«Create repository from template»`. - -![Creating repo from a template step 2](./assets/template-step-2.png) - -Після того як репозиторій буде створено, необхідно перейти в налаштування -створеного репозиторію на вкладку `Settings` > `Actions` > `General` як -показано на зображенні. - -![Settings GitHub Actions permissions step 1](./assets/gh-actions-perm-1.png) - -Проскроливши сторінку до самого кінця, у секції `«Workflow permissions»` вибери -опцію `«Read and write permissions»` і постав галочку в чекбоксі. Це -необхідно для автоматизації процесу деплою проєкту. - -![Settings GitHub Actions permissions step 2](./assets/gh-actions-perm-2.png) - -Тепер у тебе є особистий репозиторій проекту, зі структурою файлів і папок -репозиторію-шаблону. Далі працюй із ним як із будь-яким іншим особистим репозиторієм, -клонуй його собі на комп'ютер, пиши код, роби комміти і відправляй їх на -GitHub. - -## Підготовка до роботи - -1. Переконайся що на комп'ютері встановлено LTS-версія Node.js. - [Завантаж і встанови](https://nodejs.org/en/) її якщо необхідно. -2. Встанови базові залежності проєкту командою `npm install`. -3. Запусти режим розробки, виконавши команду `npm start`. -4. Перейди в браузері за адресою [http://localhost:3000](http://localhost:3000). - Ця сторінка буде автоматично перезавантажуватися після збереження змін у файлах проєкту. - -## Деплой - -Продакшн версія проєкту буде автоматично проходити лінтинг, збиратися і -деплоїтися на GitHub Pages, у гілку `gh-pages`, щоразу, коли оновлюється -гілка `main`. Наприклад, після прямого пушу або прийнятого пул-реквесту. Для цього -необхідно у файлі `package.json` відредагувати поле `homepage`, замінивши -`your_username` і `your_repo_name` на свої, і відправити зміни на GitHub. - -```json -"homepage": "https://your_username.github.io/your_repo_name/" -``` - -Далі необхідно зайти в налаштування GitHub-репозиторію (`Settings` > `Pages`) і -виставити роздачу продакшн-версії файлів із папки `/root` гілки `gh-pages`, якщо -це не було зроблено автоматично. - -![GitHub Pages settings](./assets/repo-settings.png) - -### Статус деплоя - -Статус деплою крайнього коміту відображається іконкою біля його ідентифікатора. - -- **Жовтий колір** - виконується збірка і деплой проєкту. -- **Зелений колір** - деплой завершився успішно. -- **Червоний колір** - під час лінтингу, сборки або деплою сталася помилка. - -Детальнішу інформацію про статус можна подивитися, клікнувши на іконку, і -у вікні, що випадає, перейти за посиланням `Details`. - -![Deployment status](./assets/deploy-status.png) - -### Жива сторінка - -Через якийсь час, зазвичай кілька хвилин, живу сторінку можна буде подивитися -за адресою, вказаною у відредагованій властивості `homepage`. Наприклад, ось -посилання на живу версію для цього репозиторію -[https://goitacademy.github.io/react-homework-template](https://goitacademy.github.io/react-homework-template). - -Якщо відкривається порожня сторінка, переконайся, що у вкладці `Console` немає помилок -пов'язаних із неправильними шляхами до CSS і JS файлів проєкту (**404**). Швидше -за все у тебе неправильне значення властивості `homepage` у файлі `package.json`. - -### Маршрутизація - -Якщо додаток використовує бібліотеку `react-router-dom` для маршрутизації, -необхідно додатково налаштувати компонент ``, передавши у пропе -`basename` точну назву твого репозиторію. Слеш на початку рядка обов'язковий. - -```jsx - - - -``` - -## Як це працює - -![How it works](./assets/how-it-works.png) - -1. Після кожного пушу в гілку `main` GitHub-репозиторія, запускається спеціальний - скрипт (GitHub Action) з файла `.github/workflows/deploy.yml`. -2. Усі файли репозиторію копіюються на сервер, де проект ініціалізується і - проходить лінтинг і збірку перед деплоєм. -3. Якщо всі кроки пройшли успішно, зібрана продакшн-версія файлів проєкту - відправляється в гілку `gh-pages`. В іншому випадку, в лозі виконання - скрипта буде вказано в чому проблема. diff --git a/README.pl.md b/README.pl.md deleted file mode 100644 index be1f226..0000000 --- a/README.pl.md +++ /dev/null @@ -1,117 +0,0 @@ -**Read in other languages: [rosyjski](README.md), [polski](README.pl.md).** - -# React homework template - -Ten projekt został stworzony przy pomocy -[Create React App](https://github.com/facebook/create-react-app). W celu -zapoznania się z konfiguracją dodatkowych opcji -[zobacz dokumentację](https://facebook.github.io/create-react-app/docs/getting-started). - -## Utworzenie repozytorium zgodnie z szablonem - -Wykorzystaj to repozytorium organizacji GoIT jako szablon do utworzenia -repozytorium własnego projektu. W tym celu kliknij na przycisk -`"Use this template"` i wybierz opcję `"Create a new repository"`, jak pokazano -na rysunku. - -![Creating repo from a template step 1](./assets/template-step-1.png) - -W następnym kroku otworzy się strona utworzenia nowego repozytorium. Wypełnij -pole nazwy i upewnij się, że repozytorium jest publiczne, a następnie kliknij na -przycisk `"Create repository from template"`. - -![Creating repo from a template step 2](./assets/template-step-2.png) - -Po utworzeniu repozytorium, należy przejść do jego ustawień w zakładce `Settings` > `Actions` > `General`, jak pokazano na rysunku. - -![Settings GitHub Actions permissions step 1](./assets/gh-actions-perm-1.png) - -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. - -![Settings GitHub Actions permissions step 2](./assets/gh-actions-perm-2.png) - -Teraz masz własne repozytorium projektu, ze strukturą folderów i plików jak w -szablonie. Pracuj z nim jak z innymi repozytoriami, klonuj je na swój komputer, -pisz kod, rób commity i wysyłaj na GitHub. - -## Przygotowanie do pracy - -1. Upewnij się, że na komputerze zainstalowana jest wersja LTS Node.js. - [Ściągnij i zainstaluj](https://nodejs.org/en/), jeżeli trzeba. -2. Utwórz bazowe zależności projektu przy pomocy polecenia `npm install`. -3. Włącz tryb pracy, wykonując polecenie `npm start`. -4. Przejdź w przeglądarce pod adres - [http://localhost:3000](http://localhost:3000). Ta strona będzie - automatycznie przeładowywać się po zapisaniu zmian w plikach projektu. - -## Deployment - -Produkcyjna wersja projektu będzie automatycznie poddana pracy lintera, budowana -i deployowana na GitHub Pages, w gałęzi `gh-pages` za każdym razem, gdy -aktualizuje się gałąź `main`, na przykład po bezpośrednim pushu lub przyjętym -pull requeście. W tym celu należy w pliku `package.json` zredagować pole -`homepage`, zamieniając `your_username` i `your_repo_name` na swoje nazwy i -wysłać zmiany do GitHub. - -```json -"homepage": "https://your_username.github.io/your_repo_name/" -``` - -Następnie należy przejść do ustawień repozytorium GitHub (`Settings` > `Pages`) -i wydystrybuować wersję produkcyjną plików z folderu `/root` gałęzi `gh-pages`, -jeśli nie zostało to wykonane automatycznie. - -![GitHub Pages settings](./assets/repo-settings.png) - -### Status deploymentu - -Status deploymentu ostatniego commitu wyświetla się jako ikona obok jego -identyfikatora. - -- **Żółty kolor** - wykonuje się zbudowanie i deployment projektu. -- **Zielony kolor** - deploymnt zakończył się sukcesem. -- **Czerwony kolor** - podczas pracy lintera, budowania lub deploymentu wystąpił - błąd. - -Bardziej szczegółowe informacje o statusie można zobaczyć po kliknięciu na -ikonkę i przejściu w wyskakującym oknie do odnośnika `Details`. - -![Deployment status](./assets/deploy-status.png) - -### Deployowana strona - -Po jakimś czasie, zazwyczaj kilku minut, zdeployowaną stronę będzie można -zobaczyć pod adresem wskazanym w zredagowanej właściwości `homepage`. Tutaj na -przykład znajduje się odnośnik do zdeployowanej strony w wersji dla tego -repozytorium -[https://goitacademy.github.io/react-homework-template](https://goitacademy.github.io/react-homework-template). - -Jeżeli otwiera się pusta strona, upewnij się, że w zakładce `Console` nie ma -błędów związanych z nieprawidłowymi ścieżkami do plików CSS i JS projektu -(**404**). Najprawdopodobniej wprowadzona została niewłaściwa wartość -właściwości `homepage` w pliku `package.json`. - -### Trasowanie - -Jeżeli aplikacja wykorzystuje bibliotekę `react-router-dom` dla trasowania, -należy uzupełniająco skonfigurować komponent ``, przekazując w -propsie `basename` dokładną nazwę twojego repozytorium. Slash na początku i na -końcu łańcucha jest obowiązkowy. - -```jsx - - - -``` - -## Jak to działa - -![How it works](./assets/how-it-works.png) - -1. Po każdym pushu do gałęzi `main` repozytorium GitHub, uruchamia się specjalny - skrypt (GitHub Action) z pliku `.github/workflows/deploy.yml`. -2. Wszystkie pliki repozytorium kopiują się na serwer, gdzie projekt zostaje - zainicjowany i przechodzi pracę lintera oraz zbudowanie przed deploymentem. -3. Jeżeli wszystkie kroki zakończyły się sukcesem, zbudowana wersja produkcyjna - plików projektu wysyłana jest do gałęzi `gh-pages`. W przeciwnym razie, w - logu wykonania skryptu zostanie wskazane z czym jest problem. diff --git a/package-lock.json b/package-lock.json index a1d4f24..044ac05 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,11 +1,11 @@ { - "name": "react-homework-template", + "name": "goit-react-hw-05-movies", "version": "0.1.0", "lockfileVersion": 2, "requires": true, "packages": { "": { - "name": "react-homework-template", + "name": "goit-react-hw-05-movies", "version": "0.1.0", "dependencies": { "@testing-library/jest-dom": "^5.16.3", diff --git a/package.json b/package.json index 18768d5..9b9546d 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,8 @@ { - "name": "react-homework-template", + "name": "goit-react-hw-05-movies", "version": "0.1.0", "private": true, - "homepage": "https://goitacademy.github.io/react-homework-template/", + "homepage": "https://danretegan.github.io/goit-react-hw-05-movies/", "dependencies": { "@testing-library/jest-dom": "^5.16.3", "@testing-library/react": "^12.1.4",