vre-web

Development

Create an .env file in the project root, by copying env-dev.example

# install nvm
nvm install

# use nvm
nvm use

# install node modules
yarn install

# serve with hot reload at localhost:3000
yarn dev

Build Setup

# install dependencies
yarn install

# serve with hot reload at localhost:3000
yarn dev

# build for production and launch server
yarn build
yarn start

Building, Yarn en security:

Je kunt een multi-stage dockerfile gebruiken voor de build stap, in dit voorbeeld staat ook hoe je de yarn lockfile kunt gebruiken zodat je 100% van de dependencies in de hele tree vastlegt tussen dev en prod, en niet afhankelijk bent van updates van packages (al dan niet met juiste versie nummers)
https://nuxtjs.org/deployments/koyeb#dockerize-your-application

Testing

# Run linting
yarn lint

# Run tests
yarn test

Branching

feature branches ONLY
with auto-merging to master trough tagging
all feature branches should start with "feature/"

         +------- Feature Login --- X --- X ---- X -------- T:Merge ---+
        /                                                               \

master: ---+--------------------+---------------------------------------+----+----------
\ /
+---- Feature Fun! -- X -- T:Merge -+

X = Commit
each commit triggers the tests / lint
T:Merge = a Tag called "Merge"
a "Merge" tag triggers the tests / lint with the latest master pulled
on success it (squash) merges the feature branch into master and closes the feature branch
only possible on non-master branches
only one "Merge" tag is possible at a time
T:Deploy:<date> = a Tag called "Deploy:<date>"
a "Deploy:<date>" tag triggers the deployment
only commits from the master branch can be deployed, these commits are considered save!
since the only way to commit to a master branch is by "Merge" tagging, which is only possible with succeeding tests

possible future additions

• allow "hotfix/" branches, the same way as feature branches, but with limited tests

# create a feature branch
yarn feature:create "feature-name"
# merge current (feature) branch
yarn feature:merge
# deploy a commit (from master)
#   it verifies the existence of the commit
yarn deploy "commit"

Framework and components

Nuxt: Web-framework around vue.js which also handles the server-side part Nuxt: get started

Vue: Rendering library: https://vuejs.org/v2/guide/

Vuex: Vue state management library: https://vuex.vuejs.org/ Visual explanation about Vuex: https://vuex.vuejs.org/#what-is-a-state-management-pattern

Axios: Nuxt server and client request library: https://axios.nuxtjs.org/

i18n: Nuxt internationalisation library: https://i18n.nuxtjs.org/

ajv-i18n: Multi-language json-schema validator: https://github.com/ajv-validator/ajv-i18n

Vuetify: Commonly used UI library based on Google's Material Design: https://vuetifyjs.com/en/

Authentication

In store/index.js wordt de nuxtServerInit gestart bij het renderen op de server, hier wordt de /me profile url aangeroepen, als deze succesvol afrond wordt de store bijgewerkt met de user's profile en de isAuthenticated op true gezet. Verderop in de middleware, deze wordt uitgevoerd als de route gevonden is, wordt van de gevonden pagina opgehaald wat de "auth" settings zijn. Als voor de pagina authenticatie vereist is wordt de user ge-redirect.

Het laatste stuk staat in de interceptor van plugins/axios.js, de response interceptor kijkt naar de status code van het http request en als die 401 is wordt de user ge-redirect naar de authenticatie pagina.