This is an example app to show how to build a flexible and modular frontend. The main technologies used are Vue together with Vuex and Nuxt.js in combination with the node-sass-magic-importer.
The two main goals of a well-composed frontend are: a solid user experience and a solid developer experience. The former is achieved by building a fast (instantly) loading site with app like behaviour. The later is solved by building upon a solid framework and using components (custom and ready-made) to keep the code DRY.
To enable (almost) instant loading, server side rendering is utilized to speed up the first view. Vue serves as a very solid framework to build mighty apps upon. Vuex is used to manage the state of the app.
The combination of webpack and node-sass-magic-importer makes it possible to modularize every aspect of the frontend workflow. Frontend developers are using JavaScript modules for quite some time now and with ES6 it got even more comfortable doing so. Although Sass made it much easier to also modularize your CSS code it is still laking an easy way to load styles from third party modules. For this project node-sass-magic-importer is used to load styles from avalanche packages.
yarn run initInstall dependencies and set up correct.envfile.yarn run apiStart the GraphQL API server.yarn run devServe with hot reload at localhost:3000.yarn run buildBuild for production.yarn startLaunch server.yarn run generateGenerate static project.
For detailed explanation on how things work, checkout the Nuxt.js docs.
Markus Oberlehner
Website: https://markus.oberlehner.net
Twitter: https://twitter.com/MaOberlehner
PayPal.me: https://paypal.me/maoberlehner
Patreon: https://www.patreon.com/maoberlehner
MIT