/single-page-app-vanilla-js

Simple-Page App built with Node.js and no dependencies - with GH Pages support added on my fork

Primary LanguageJavaScriptMIT LicenseMIT

Vanillin

Simple-Page App built with Node.js and no dependencies

GitHub tag License: MIT

View site GH Pages

Badges created with Badge generator tool.

About

This app works with HTML, CSS and plain JS.

There are no dependencies.

The site is served as static site on GitHub Pages.

There is no build step. Just static assets - index.html and the static directory. Unfortunately, on GH Pages you have to serve from the project root or docs, otherwise this app would have been added to a folder like public or frontend.

Usage

How to run locally

Clone this repo or your fork of it.

Start a local dev server in the repo root - see my gist for ideas.

Open the browser at your localhost URL without a subpath. e.g.

The pages are served under this subpath, but unfortunately you can't head here directly, because of how this app's routing works, when setup to run for GH Pages.

Deploy

Just copy this project as fork and deploy to GH Pages using your repo's Settings. There is no build step needed and so no GH Actions workflow.

View the deployed site:

Notes

Background

This repo is forked from dcode-youtube/single-page-app-vanilla-js. I discovered it through this dev.to post. I liked the idea of building a SPA from scratch and thought the JS and CSS might come in useful sometime.

Regarding my contributions on my fork, I improved the posts section, added to the docs and changed up the routing so app can run on a project subpath on GitHub Pages. This last part involved moving all content to the project root or static directory and using the project name as prefix in all URLs, to match what GH Pages will do expect (e.g. /posts needs to be /single-page-app-vanilla-js/posts).

I also removed use Express and server.js since I documented an alternate way of serving the project locally, without an npm install step.

Project name

I named the project Vanillin in keeping with the vanilla JS approach of the original project.

See Vanillin - Wikipedia page.

It is the primary component of the extract of the vanilla bean

Limitations

There are some limitations. Like refreshing a page or inputting a valid path manually in the address bar will give a error result. So maybe sure to start off from the root page each time and you make a change to the app locally.

Also there is no hot-reloading.

The dev experience could be improved by using an NPM server that handles these features better, though it would not match the intended prod environment of a static site.

License

Released under MIT.

Forked from dcode-youtube/single-page-app-vanilla-js which is licensed under ISC (similar to MIT) according to package.json.