Edit

Title

Content

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.

Image