-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add deployment instructions for frontend
- Loading branch information
1 parent
ee5a5ed
commit a986ae8
Showing
1 changed file
with
80 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,8 +1,83 @@ | ||
# React + Vite | ||
# Pasos para deployar tu frontend (Por si no te quedó claro con el video) | ||
|
||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. | ||
## Crea tu aplicación de React | ||
|
||
Currently, two official plugins are available: | ||
En primer lugar, tienes que crear tu aplicación y correrla. Para ello debes correr el siguiente comando en el directorio principal de tu repositorio de GitHub: | ||
|
||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh | ||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh | ||
`yarn create vite` | ||
|
||
Luego, para correr la aplicación: | ||
|
||
`yarn dev` | ||
|
||
## Buildea la aplicación | ||
|
||
Para hacer esto se debe correr el comando: | ||
|
||
`yarn build` | ||
|
||
Luego de haberlo ejecutado, se debe haber creado una carpeta que se llama *dist*. | ||
|
||
## Realizar el setup del workflow de node.js | ||
|
||
Al terminar los pasos previos, es importante que hagas push a los cambios que realizaste previamente. Después, entras a la página del repositorio y accedes a actions. Posteriormente, debes buscar node.js, realizar la configuración y commitear los cambios. Luego debes hacer `git pull` de los cambios en que realizaste del workflow de node.js. | ||
|
||
## Login en Netlify y creación de página | ||
|
||
En este paso vinculas tu cuenta de GitHub con Netlify y creas una página usando y arrastrando la carpeta `./dist` que se encuentra en el directorio principal del repositorio. | ||
|
||
## Obtención de Secrets | ||
|
||
En este paso debes crear un token en "User Settings" -> "Applications" -> "Personal access token" en la página de Netlify. Recordar que la duración del token debe ser de por lo menos la duración del curso. | ||
|
||
Posteriormente, se debe incluir en los secrets de git, con el nombre de `NETLIFY_API_TOKEN`. Esto se puede hacer en "Repositorio de GitHub" -> "Settings" -> "Secrets and variables" -> "Actions" -> "Repository secrets". | ||
|
||
De una manera similar se debe recuperar el id de la página de Netlify. Para ello, se ingresa a "Sites" -> "Nombre de tu sitio" -> "Site configuration" -> "Site details" -> "Site ID". | ||
|
||
Finalmente, se incluye en los secrets del repositorio en GitHub, con el nombre `NETLIFY_SITE_ID`. | ||
|
||
## Cambio del archivo node.js.yml | ||
|
||
Finalmente, se debe crear el directorio `.github/workflows` con el archivo `node.js.yml` y agregar el siguiente archivo: | ||
|
||
``` | ||
name: Deploy website | ||
on: | ||
push: | ||
branches: [ "main" ] | ||
jobs: | ||
build-and-deploy: | ||
runs-on: ubuntu-latest | ||
steps: | ||
- name: Repository Checkout | ||
uses: actions/checkout@v4 | ||
- name: Setup NodeJS | ||
uses: actions/setup-node@v4 | ||
with: | ||
node-version: 20 | ||
cache: "npm" | ||
- name: Install Netlify | ||
run: yarn add netlify-cli | ||
- name: Install Dependencies | ||
run: yarn install | ||
- name: Build project | ||
run: yarn build | ||
- name: Deploy to Netlify | ||
id: netlify_deploy | ||
run: | | ||
netlify deploy --prod \ | ||
--dir dist \ | ||
--site ${{ secrets.NETLIFY_SITE_ID }} \ | ||
--auth ${{ secrets.NETLIFY_API_TOKEN }} | ||
``` | ||
|
||
Finalmente, se debe realizar un commit de los cambios y el deployment del frontend debería estar listo. | ||
|
||
Ayudantía realizada por @PSepulvedaS |