Project Pipeline using GitHub Actions
-
DevOps
Project Pipeline using GitHub Actions
1. Create a .github folder.
2. Inside the .github folder, create a workflows folder.
3. Inside the workflows folder, create a main.yml file.
For a React project that requires a build:
on:
push:
branches:
- main
name: 🚀 Deploy React App on push
jobs:
web-deploy:
name: 🎉 Deploy
runs-on: ubuntu-latest
steps:
- name: 🚚 Get latest code
uses: actions/checkout@v4
- name: 📦 Set up Node.js
uses: actions/setup-node@v3
with:
node-version: '16'
- name: 📥 Install dependencies
run: npm install
- name: 🔨 Build the project
run: npm run build
- name: 📂 Sync files
uses: SamKirkland/FTP-Deploy-Action@v4.3.5
with:
server: ${{ secrets.ftp_host }}
username: ${{ secrets.ftp_user }}
password: ${{ secrets.ftp_password }}
local-dir: dist/ --> usando Vite
local-dir: build/ --> usando CRA
For a Vanilla js project:
on:
push:
branches:
- main
name: 🚀 Deploy website on push
jobs:
web-deploy:
name: 🎉 Deploy
runs-on: ubuntu-latest
steps:
- name: 🚚 Get latest code
uses: actions/checkout@v4
- name: 📂 Sync files
uses: SamKirkland/FTP-Deploy-Action@v4.3.5
with:
server: ${{ secrets.ftp_host }}
username: ${{ secrets.ftp_user }}
password: ${{ secrets.ftp_password }}
4. Create a .gitignore file.
5. Run the command git init.
6. Run the command git add .
7. Run the command git commit -m "first commit".
8. Create a repository on GitHub and link it with the local repository.
9. Create a Account FTP on cPanel for the project
10. Create the secrets (ftp_host, ftp_user, ftp_password).
11. Run build on local machine to make sure everything is OK
--> Note that ftp_user needs to be the FTP user created in your hosting service and already linked to the correct domain.
12. Push the changes.
-->🎉 Deploy - With each push, GitHub Actions will automatically run the pipeline and deploy the repository to the configured domain.