Boilerplate of VueJS application, which includes server-side rendering, hot reloading, VueX state management, CSS modules, code splitting, ESLint and customizable configs.
I decided develop my new application, using VueJS. I was looking for convenient examples of VueJS, Vuex, which using SSR and hot reloading, but I didn't find them.
So, I decided to create this boilerplate. I hope that it will be helpful for somebody.
It helps to user to receive content faster. Also, it improves SEO.
Routing without full reload pages.
State management pattern. Represents centralized store for all the components in an application.
Also, it contains example of fetch data from API and store it to Vuex modules.
System for modularizing and composing CSS. You can use it as:
And result class will be shown like
Technique, which improves your development performance significantly. When you change your code or css you will see result immediately in browser. If you use SSR, probably, usually you have a problem, when you reload page, because your server-side code doesn't have hot-reloading. But in this boilerplate similar problem resolved. When you change code, server-side code will recompile too. And if you reload page, you will see changes on server side.
In this boilerplate you doesn't have one huge js bundle, but you have one main bundle a few small bundles for each page.
It allows not to load unnecessary code for current page.
Boilerplate has a base webpack config and different configs for client and server. Production build has minified css and js bundles with hash in name for caching static in browser.
Also, there is a convenient html template where you can put your common html code.
Boilerplate has ESLint with Airbnb VueJS config and Prettier for awesome code formatting.
To start environment for local development, use: ``` yarn run dev
sudo yarn run build && yarn run dev ``` If you run it the first time, you'll get error, that server bundle wasn't found. It's normal. Just re-run this task.
To production build, use (assets will be served from
yarn run build
To run server side, use:
yarn run start(Note, this way isn't for production. Better, you should use process manager, like
Application will be available on http://localhost:3000/
Thank you for your time! ❤️
If you have any questions, please send new pull requests or create issues.