From f35044d5fcf905556dee3cbc9f16fbb29666f44c Mon Sep 17 00:00:00 2001 From: sahib Date: Thu, 6 Jan 2022 01:24:44 -0600 Subject: [PATCH] #3 Adding SPA support for GitHub Pages --- 404.html | 39 ++++++++++++++++++++++++++++++++++++ src/ui/App.vue | 10 ++++++++- src/ui/index.html | 26 +++++++++++++++++++++++- src/ui/router/routes.ts | 7 ++++++- src/ui/views/About/Index.vue | 5 +++++ webpack.config.js | 8 ++++++++ 6 files changed, 92 insertions(+), 3 deletions(-) create mode 100644 404.html create mode 100644 src/ui/views/About/Index.vue diff --git a/404.html b/404.html new file mode 100644 index 0000000..e9c35fa --- /dev/null +++ b/404.html @@ -0,0 +1,39 @@ + + + + + Single Page Apps for GitHub Pages + + + + + diff --git a/src/ui/App.vue b/src/ui/App.vue index aa34dcb..56a5f4d 100644 --- a/src/ui/App.vue +++ b/src/ui/App.vue @@ -5,6 +5,7 @@ +
DigiView Web - About
 @@ -33,4 +34,11 @@ export default { .md-app-toolbar .md-title { color: white!important; } - \ No newline at end of file + #footer { + position: absolute; + text-align: center; + bottom: 1em; + left: 0; + right: 0; + } + diff --git a/src/ui/index.html b/src/ui/index.html index 0e37331..b339351 100644 --- a/src/ui/index.html +++ b/src/ui/index.html @@ -7,9 +7,33 @@ DigiView - Web + + +
- \ No newline at end of file + diff --git a/src/ui/router/routes.ts b/src/ui/router/routes.ts index e3a4688..da3bf7d 100644 --- a/src/ui/router/routes.ts +++ b/src/ui/router/routes.ts @@ -4,4 +4,9 @@ export default [ name: 'view-usb', component: () => import('~/ui/views/ViewUSB/Index.vue'), }, -]; \ No newline at end of file + { + path: '/about', + name: 'about', + component: () => import('~/ui/views/About/Index.vue'), + }, +]; diff --git a/src/ui/views/About/Index.vue b/src/ui/views/About/Index.vue new file mode 100644 index 0000000..300f2b1 --- /dev/null +++ b/src/ui/views/About/Index.vue @@ -0,0 +1,5 @@ + diff --git a/webpack.config.js b/webpack.config.js index e90b9de..0103d00 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -17,6 +17,14 @@ module.exports = { compress: true, port: 9001, https: true, + // We need this rewrite rule to test 404 page in development, copy 404.html file + // to the dist folder manually, it's git-ignored anyways, once we're confident + // this is working, we can change the directive historyApiFallback to true. + historyApiFallback: { + rewrites: [ + { from: /^\/.+/, to: '/404.html' }, + ], + }, }, resolve: { alias: {