Zeropenny Frontend Starter Kit

A VueJS project which includes Navigation (vue-router), State management (vuex) all in an OOP Typescript flavour. Inspired by the Zero Penny Architecture concept.

Prerequisites

• Having a Gitlab Account and deploy this project to a repository hosted on Gitlab (for .gitlab-ci.yml to work properly)
• Having an Heroku account and setup an Heroku application for your project.
• Docker installed on your system.

Installing

Install all dependencies

yarn install

Install heroku CLI

snap install heroku --classic

Making the boilerplate work for your project

NOTE: see the README.md of the internal folder for tips on how to proceed.

Replace the values with the ones for your project (e.g. any example.com or myawesomeapp variants) with the actual values for your project:

this includes the references to gitlab repositories and heroku applications in the .gitlab-ci.yml file.

like in a normal VueJS project, use yarn serve and yarn build.

To push to heroku manually use yarn deploy.

The boilerplate is set to work with two Gitlab environments: development and production, so be sure you created them. It also leverages the Gitlab registry to store docker images.

References

• VueJS: https://vuejs.org
• Vuex: https://vuex.vuejs.org
• Vuex Class Component: https://github.com/michaelolof/vuex-class-component
• Vue Router: https://router.vuejs.org

Credits

This project is one application of what can be found in the Zero Penny Architecture Pattern article I wrote on medium.