Vue Hugo Netlify Spa Demo

Overview:

This document provides an analysis of a research project involving JAMstack SPA and REST API, utilizing Vue, Hugo, and Netlify CMS. The project aims to explore the feasibility of using a monorepo with these technologies and to generate a read-only, git-backed REST API using Hugo. The API can be updated through the Netlify CMS admin UI or the GitHub API. The project also includes a Vue.js, Nuxt, Axios, Vuetify SPA front-end for accessing the API, and all the components are deployed via Netlify. The JAMstack model and Netlify's hosting offer scalability, global distribution through CDN, high speed, security, and cost-efficiency.

Features:

• Monorepo architecture with Vue, Hugo, and Netlify
• Hugo-generated read-only JSON API
• Integration with Netlify CMS for non-technical content editors
• Scalability, global distribution, and high speed through JAMstack and Netlify hosting

API Setup:

1. From the root folder, run hugo new site api to create the api subfolder.
2. In the api folder, remove unnecessary Hugo files like archetypes and themes.
3. Modify the config.toml file in Hugo to eliminate RSS and sitemap configurations.
4. Run npm init -y to create an initial package.json file for NPM Scripts.
5. Configure the following NPM Scripts commands:
   • npm run dev or yarn dev to run a local Hugo development server with live reload.
   • npm run build or yarn build to perform a quick, incremental build to the ./dist folder.
   • npm run build-full or yarn build-full to perform a full build, cleaning the ./dist folder.
6. Log in to app.netlify.com with GitHub credentials and click "New site from Git".
7. Under "Continuous Deployment," select GitHub and authorize Netlify.
8. Select this repository under "Create a new site."
9. Configure the master branch to deploy, set the "Build command" to cd api && npm run build, and set the "Publish directory" to api/dist.
10. Click "Deploy site."
11. Configure a subdomain to host the site under Netlify, such as https://bobble-api.netlify.com/ (refer to the netlify.toml config file for setup specifics).

App Setup:

1. For setting up the frontend App, use create-nuxt-app.
2. From the project's root folder, run yarn create nuxt-app app.

Summary:

This project explores the use of JAMstack SPA and REST API by combining Vue, Hugo, and Netlify CMS. The goal is to create a monorepo that generates a read-only JSON API using Hugo, which can be updated through a Netlify CMS admin UI or the GitHub API. A Vue.js, Nuxt, Axios, Vuetify SPA front-end is used to access the API. The project leverages the scalability and global distribution capabilities of the JAMstack model and the hosting provided by Netlify. It offers a highly performant, secure, and cost-effective solution for building and deploying web applications.