Rails + Vue.js SPA-ish Template

A simple template for creating a Vue.js single page application inside Rails using Webpacker along with a Rails API.

Mainly used for my own personal projects, so please remove/adapt things as you need.

Why not a "real" SPA?

For me, having a single application to deploy and maintain reduces the complexity a lot. You get most of the benefits of running an SPA this way, plus the power of Rails for your API.

Technology Used

Rails
RSpec
ESLint
Axios
Vue.js
Vue Router
Typescript
Tailwind CSS

Also sets up

An example Dockerfile, based on alpine to keep the size down
Dependabot for Bundler and Yarn
Github actions
- Run RSpec
- Run ESLint
- Build Docker image
- Push Docker image to Github Container Registry (Optional - See below)

Github Container Registry

By default, this repo will just build the Docker image in Github Actions, but it will not push it anywhere.

To push these images to the Github Container Registry, please do the following:

Head over to Personal access tokens, and create a token with write:packages permissions.
Edit this repository, and got to Secrets
Add the token from step one with the key GHCR_TOKEN
Now each time you push to master, an image will be built, tagged with that commit hash, and pushed to Github Container Registry.

Structure

There is a single Rails ERB file, which is the entrypoint into Vue.js. It lives in app/views/application/index.html.erb. All other view rendering is handled by Vue.js.

Inside that ERB file, we load app/javascript/packs/application.ts, which loads Vue.js, and delegates all routing to vue-router, with all the routes being defined in app/javascript/routes.ts.