React Deployment
Please follow one of the following metbods.
Vitejs Deployment: Github Pages using the gh-pages CLI tool
Navigate into your project via a CLI tool (ubuntu/ terminal) Go through gitflow and save your current code.
git add
git commit -m 'commit-message'
git push
Next, run the following command:
npm run build
You can check to see if your build worked by running the command:
npm run preview
You should be able to see your application within your browser at http://localhost:4173
After validating that this works, we will install the required packages:
Run the command: npm install gh-pages --save-dev
Now we will setup the package.json: Add these scripts into scrips:
"predeploy": "npm run build",
"deploy": "gh-pages -d dist",
Now we will configure the vite.config.js: We need to add a key value pair for gh-pages:
The key will be base, the value should be โ/name-of-your-repoโ The configure should look something like:
export default defineConfig({
plugins: [react()],
base: "/ftbc14_vitejs/",
});
Now you should be able to run the command: npm run deploy
#==========================================================#
Vitejs Deployment: Github Pages through git push
Navigate into your project via a CLI tool (ubuntu/ terminal)
Go through gitflow and save your current code.
git add
git commit -m 'commit-message'
git push
Run the following command:
git checkout -b gh-pages
Next, run the following command:
npm run build
You can check to see if your build worked by running the command:
npm run preview
You should be able to see your application within your browser at http://localhost:4173
Now we will configure the vite.config.js: We need to add a key value pair for deployment:
The key will be base, the value should be โ/name-of-your-repoโ The configure should look something like:
export default defineConfig({
plugins: [react()],
base: "/ftbc14_vitejs/",
});
Within your local machine we need to make a new github workflow within a yml file.
Create a new folder named .github
Within the newly created directory create a workflows folder
In the workflows folder create a new file named: jekyll-gh-pages.yml
Paste in this file:
# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages
on:
# Runs on pushes targeting the default branch
push:
branches: ["gh-pages"]
# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:
# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
permissions:
contents: read
pages: write
id-token: write
# Allow one concurrent deployment
concurrency:
group: "pages"
cancel-in-progress: true
jobs:
# Single deploy job since we're just deploying
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup Node.js environment
uses: actions/[email protected]
with:
node-version: lts/*
cache: 'npm'
- name: Install dependencies
run: npm install
- name: Build
run: npm run build
- name: Setup Pages
uses: actions/configure-pages@v3
- name: Upload artifact
uses: actions/upload-pages-artifact@v2
with:
# Upload entire repository
path: './dist'
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v2
In your GitHub, repo goto pages and then choose source as GitHub actions, not deploy from branch. Now you should be able to deploy when you push to this branch, before this will work we need to go through git flow (add commit and push) Then run the command:
git push origin gh-pages
Last updated