Research Project - JAMstack SPA Using Vue, Hugo, and Netlify CMS
This repo contains a demo/POC project to see how well a monorepo using Vue, Hugo, and Netlify will work.
The idea is to use Hugo to generate a read-only, git-backed REST API (inspiration was found here) with data that can be updated via:
The API backend would, for purposes of this demo, be hit by a Vue.js, Nuxt, Axios, Vuetify SPA front-end.
And the hope is to have all of the pieces in this one monorepo deploy via Netlify upon any push to master (see related discussion here).
So to summarize:
And given the JAMstack model and Netlify's hosting, this should all be massively scalable, globally distributed via CDN, extremely fast, virtually un-hackable, and totally free to run.
Here's a running list of the things that I did to kick-off this project after writing the initial README content above.
I already had the tools installed, but if you want to follow along here's what you need.
For the API piece it's about getting Hugo setup for serving primarily JSON instead of HTML.
hugo new site api
, which created the api
subfolderapi
folder
archetypes
, themes
, etc.config.toml
to eliminate RSS and sitemap stuffnpm init -y
to create an initial package.json
so we can use NPM Scripts to control how Hugo does thingsnpm run dev
or yarn dev
to run a local Hugo development server with live reloadnpm run build
or yarn build
to do a quick, incremental build to ./dist
npm run build-full
or yarn build-full
to do a full build, cleaning the ./dist
foldermaster
branch to deploy, set "Build command" to cd api && npm run build
and "Publish directory" to api/dist
netlify.toml
config file RE: setup as it is unique to this monorepo approachFor the frontend App I used create-nuxt-app.
yarn create nuxt-app app
and entered/selected the following options
slathrop-vue-hugo-spa-app
create-nuxt-app
initializes git in the app
folder created. We don't need separate git tracking for this subfolder, so
cd app
.git
folder: rd /s /q .git
(on Windows)create-nuxt-app
has some outdated dependencies listed in the generated package.json
, so updated to
"nuxt": "^1.4.0"
"vuetify": "^1.0.18"
"@nuxtjs/axios": "^5.3.1"
npm install
dark
to light
in app\layouts\default.vue
and the default progress bar color in app\nuxt.config.js
master
branch to deploy, set "Build command" to cd app && npm install && npm run generate
and "Publish directory" to app/dist
For the admin UI:
TODO