You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
Joshua Rubingh 2a8353c800 A hole lot of updates 4 hours ago
assets init 2 months ago
components A hole lot of updates 4 hours ago
config Clean-up 2 weeks ago
docker Small updates for building docker image 1 week ago
layouts Login update 3 weeks ago
lib Login update 3 weeks ago
locales A hole lot of updates 4 hours ago
middleware Login update 3 weeks ago
pages A hole lot of updates 4 hours ago
plugins A hole lot of updates 4 hours ago
scripts bult 1 month ago
store A hole lot of updates 4 hours ago
stubs init 2 months ago
test init 2 months ago
.babelrc init 2 months ago
.dockerignore Reduce docker image size 1 week ago
.drone.yml Fix api url 2 weeks ago
.editorconfig Re-init skeleton to latest package versions vue.js, nuxt.js with vuetify 5 months ago
.eslintrc.js init 2 months ago
.gitignore Re-init skeleton to latest package versions vue.js, nuxt.js with vuetify 5 months ago
.nvmrc init 2 months ago
.prettierrc init 2 months ago
API init 2 months ago
README.md Updated readme 2 weeks ago
ava.config.cjs init 2 months ago
docker-compose.yaml Reduce docker image size 1 week ago
jsconfig.json init 2 months ago
nuxt.config.js A hole lot of updates 4 hours ago
package.json A hole lot of updates 4 hours ago
yarn.lock A hole lot of updates 4 hours ago

README.md

vre-web

Build Status

Development

# 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.