In this article, we will cover the practical deployment of a frontend application on GitHub Pages, step by step. It is mainly focused for personal purposes such as creating a web portfolio. Well, let's get started...
Initial installation
First, we install node.js LTS, the recommended version.
We go to a folder where we will create the project and execute the command to create a project with vite.js:
npm create vite@latest
It will show us options for creating the project:
- Project name
- Package name
- Framework selection -> React
- JavaScript variant selection -> JavaScript
Then we go to the created folder and install the dependencies:
npm install
Etapa de configuración y publicación en GitHub Page
First, we create a git repository and add the remote repository. Then we create a branch in git called gh-pages
, which we can do with git checkout -b gh-pages
. Then we go to the main
branch.
Next, we install the dependency called gh-pages, but as a development dependency:
npm install gh-pages --save-dev
Now we configure the package.json file:
Add "homepage", which will be the link to the page on GitHub Pages, following the format http://[username].github.io/[name_repository_remote]/
example: "homepage": "https://luiszapatayamo.github.io/Test-Publish-GHPages/"
In the scripts section, we include "predeploy": "npm run build"
and "deploy": "gh-pages -d dist"
.
{
"name": "test",
"private": true,
"version": "0.0.0",
"type": "module",
"homepage": "https://luiszapatayamo.github.io/Test-Publish-GHPages/",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview",
"predeploy": "npm run build",
"deploy": "gh-pages -d dist"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"@vitejs/plugin-react": "^4.0.0-beta.0",
"eslint": "^8.38.0",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.3.4",
"gh-pages": "^5.0.0",
"vite": "^4.3.0"
}
}
We also modify the vite.config.js file to set the base URL. In this case, it will follow this format /name_repository_remote/:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import svgr from 'vite-plugin-svgr'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react(), svgr()],
base: '/Test-Publish-GHPages/'
})
We confirm all the changes and send them to the remote repository, then run npm run deploy. This will create a folder named dist and publish your application on GitHub Pages.
Note: Adjustments for react-router-dom
If we use react-router-dom, we need to add the basename="/[name_repository_remote]"
attribute to the BrowserRouter
component in your Routing.jsx
file. Then, we confirm the changes, push them to the remote repository, and run npm run deploy
.
<BrowserRouter basename="/Test-Publish-GHPages">
<Routes>
<Route index path='/' element={<Component/>}/>
</Routes>
</BrowserRouter>
That's it! You have successfully deployed your frontend application on GitHub Pages using Vite.js.
Software: vite==4.3 , react==18.2, gh-page==5.0, node.js==18.16
Top comments (1)
Some comments may only be visible to logged-in visitors. Sign in to view all comments. Some comments have been hidden by the post's author - find out more