https://github.com/maoberlehner/well-composed-frontend

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.
https://github.com/maoberlehner/well-composed-frontend

avalanche node-sass-magic-importer vue vuex webpack

Last synced: 17 days ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/maoberlehner/well-composed-frontend
• Owner: maoberlehner
• License: mit
• Created: 2017-01-20T19:06:51.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2024-10-11T02:08:49.000Z (about 1 month ago)
• Last Synced: 2024-10-11T15:45:48.377Z (about 1 month ago)
• Topics: avalanche, node-sass-magic-importer, vue, vuex, webpack
• Language: JavaScript
• Homepage:
• Size: 2.83 MB
• Stars: 22
• Watchers: 3
• Forks: 3
• Open Issues: 22
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# A well-composed frontend

[![Patreon](https://img.shields.io/badge/patreon-donate-blue.svg)](https://www.patreon.com/maoberlehner)

[![Donate](https://img.shields.io/badge/Donate-PayPal-blue.svg)](https://paypal.me/maoberlehner)

This is an example app to show how to build a flexible and modular frontend. The main technologies used are [Vue](https://vuejs.org) together with [Vuex](https://vuex.vuejs.org/en/) and [Nuxt.js](https://nuxtjs.org/) in combination with the [node-sass-magic-importer](https://github.com/maoberlehner/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](https://github.com/maoberlehner/node-sass-magic-importer) is used to load styles from [avalanche](https://avalanche.oberlehner.net/) packages.

## Getting started

- `yarn run init` Install dependencies and set up correct `.env` file.

- `yarn run api` Start the GraphQL API server.

- `yarn run dev` Serve with hot reload at localhost:3000.

- `yarn run build` Build for production.

- `yarn start` Launch server.

- `yarn run generate` Generate static project.

For detailed explanation on how things work, checkout the [Nuxt.js docs](https://github.com/nuxt/nuxt.js).

## About

### Author

Markus Oberlehner  

Website: https://markus.oberlehner.net  

Twitter: https://twitter.com/MaOberlehner  

PayPal.me: https://paypal.me/maoberlehner  

Patreon: https://www.patreon.com/maoberlehner

### License

MIT