DEV Community

Connie Leung
Connie Leung

Posted on • Edited on

Day 11 Deploy Vue 3, Svelte 5, and Angular Applications to Github Pages

#webdev #svelte #vue #angular

Table of Contents

On day 11, I will deploy all the demos to Github Page, because Github Page is free and manual deployment is also easy for me.

Github Actions to Github Pages

  • Vue 3 application 
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

// https://vite.dev/config/
export default defineConfig({
  base,
  plugins: [
    base: '/fundamental-vue3/',
    vue(),
    vueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})
Enter fullscreen mode Exit fullscreen mode
  • Build the application

In vite.config.ts, add a new base property to the object of the defineConfig function. In local environment, the URL is http://localhost:4173/fundamental-vue3/. Otherwise, the URL is https://railsstudent.github.io/fundamental-vue3/.

Open a terminal and run npm run build to build the application in dist/. Then, run npm run preview to preview and test the application at http://localhost:4173/fundamental-vue3.

  • Deploy to Github Pages by Github Actions

Create a .github/workflows/main.yml to run the necessary commands to build the files and deploy to Github Pages

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main # or your default branch
  workflow_dispatch:  # Also allow manual trigger

permissions:
  id-token: write
  contents: read # You might also need other permissions like contents: read
  pages: write # If deploying to GitHub Pages

jobs:
  build-and-deploy:
    environment: 
      name: github-pages   # Specify the deployment environment here
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Setup Node.js (if needed for static site generator)
        uses: actions/setup-node@v4
        with:
          node-version: '22'
          cache: 'npm'

      - name: Install dependencies
        run: npm install

      - name: Build site (example for a static site generator)
        run: npm run build # or your build command

      - name: Add .nojekyll file
        run: touch dist/.nojekyll

      - name: Add 404.html file
        run: cp dist/index.html dist/404.html

      - name: Configure GitHub Pages
        uses: actions/configure-pages@v3

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./dist # or the path to your built site

      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4
Enter fullscreen mode Exit fullscreen mode

Commit the yaml file to the main branch to automate the deployment process.

Navigate to https://github.com/<repo uers>/<repo name>/settings/environment, verify github-pages environment is created. Click the environment name and verify the deployment branches and tags. Verify main is added and only this branch can deploy to Github Pages.

Navigate to https://github.com/<repo uers>/<repo name>/settings/pages, choose Github Action as the source of Build and deployment.

Click the live site to verify it is running.

  • SvelteKit application

Install new dev dependencies

npm i --save-exact --save-dev @sveltejs/adapter-static
Enter fullscreen mode Exit fullscreen mode 
import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://svelte.dev/docs/kit/integrations
    // for more information about preprocessors
    preprocess: vitePreprocess(),

    kit: {
         adapter: adapter({
            fallback: '404.html'
         }),
         paths: {
            base: '/fundamental_svelte'
         }
    }
};

export default config;
Enter fullscreen mode Exit fullscreen mode

Modify svelte.config.ts to import the adapter from @sveltejs/adapter-static.

Update adapter and add paths to the kit property.

kit: { 
    adapter: adapter({
        fallback: '404.html'
    }),
    paths: {
        base: '/fundamental_svelte'
    })
}
Enter fullscreen mode Exit fullscreen mode
  • Deploy to Github Pages by Github Actions

Create a .github/workflows/main.yml to run the necessary commands to build the files and deploy to Github Pages

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main # or your default branch
  workflow_dispatch: # Also allow manual trigger

permissions:
  id-token: write
  contents: read # You might also need other permissions like contents: read
  pages: write # If deploying to GitHub Pages

jobs:
  build-and-deploy:
    environment:
      name: github-pages # Specify the deployment environment here
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Setup Node.js (if needed for static site generator)
        uses: actions/setup-node@v4
        with:
          node-version: '22'
          cache: 'npm'

      - name: Install dependencies
        run: npm install

      - name: Build site (example for a static site generator)
        run: npm run build # or your build command

      - name: Add .nojekyll file
        run: touch build/.nojekyll

      - name: Configure GitHub Pages
        uses: actions/configure-pages@v3

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./build # or the path to your built site

      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4
Enter fullscreen mode Exit fullscreen mode

The main.yml is similar except Svelte creates 404.html automatically. Moreover, Svelte compiled and copied the JavaScript to the build folder.

Commit the yaml file to the main branch to automate the deployment process.

Verify the same settings on the repository. The live site should run successfully.

  • Angular 19 application

Angular provides a schematic to facilitate deployment to Gihub Pages

ng add angular-cli-ghpages
Enter fullscreen mode Exit fullscreen mode

The schematic installs new dev dependencies to the project.

In angular.json, a new deployment builder is specified in the deploy property.

"deploy": {
   "builder": "angular-cli-ghpages:deploy"
}
Enter fullscreen mode Exit fullscreen mode

Open a new terminal and run ng deploy to automatically deploy the application to the Github Pages.

Go to https://github.com///settings/pages and click the live site to verify it is running.

We have successfully deployed the shopping cart application to the Github Pages.

Resources

Github Repos

Github Pages

Top comments (1)

Collapse
 
jance_jacobs profile image
Jance Jacobs •

This is awesome! I can't wait to try deploying my own apps to Github Pages using these steps. Thanks for sharing!