<- Go Back

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

Connie Leung

Connie Leung

2025-05-27T12:13:40Z

3 min read

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.

Manual Deployment 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'

const base = process.env.NODE_ENV === 'development' ?  
  'http://localhost:4173/fundamental-vue3/' : 'https://railsstudent.github.io/fundamental-vue3/'

// https://vite.dev/config/
export default defineConfig({
  base,
  plugins: [
    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. When the NODE_ENV is development, the base URL is http://localhost:4173/fundamental-vue3/. Otherwise, the URL is https://railsstudent.github.io/fundamental-vue3/.

"scripts": {
   "build:dev": "NODE_ENV=development vite build",
}
Enter fullscreen mode Exit fullscreen mode

In package.json, add a build:dev script that builds the application locally.

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

  • Deploy to the gh-pages Branch

Create a gh-pages branch. git checkout -b gh-pages.
Run npm run build command to build the files in dist/ folder.

This is how I did it; it may or may not be the best practice. Delete all the files except the dist folder.

Copy all the files from the dist folder to the root level and then delete dist.

Copy index.html and rename to 404.html.

Create an empty .nojekyll file.

Finally, git add the files and git push the files to the gh-pages branch.

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

  • SvelteKit application

Install new dev dependencies

npm i --sav-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: process.env.NODE_ENV === 'development' ? '' : '/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: process.env.NODE_ENV === 'development' ? '' : '/fundamental_svelte'
    })
}
Enter fullscreen mode Exit fullscreen mode
  • Deploy to the gh-pages Branch

Create a gh-pages branch. git checkout -b gh-pages.
Run npm run build command to build the files in dist folder.

This is how I did it; it may or may not be the best practice. Delete all the files except the dist folder.

Copy all the files from the dist folder to the root level and then delete dist.

Copy index.html and rename to 404.html.

Create an empty .nojekyll file.

Finally, git add the files and git push the files to the gh-pages branch.

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

  • 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.

Resources

Github Repos

Github Pages

We have successfully updated the shopping cart component to pass values to CSS classes or inline styles programmatically.