CiaoWood / vue-sails-example

Vue.js with Sails.js example project

Vue.js with Sails.js example project

This project is for those who are new to single-page applications and want to learn through a real example. Besides that, it should cover most of the features from Sails.js and Vue.js, like a reference book. For a better understanding, you should be aware of JavaScript ES6 features and also async/await.

To see this project in action, click here.

Features

This project should cover as many features as possible. It should be used as an example for newbies and also serve as a reference book. These notable elements are covered.

• Internationalization
• Unit and functional tests (frontend tests with Cypress.io)
• Dedicated mobile version
• Socket.IO usage
• Local storage plus cookie authentication
• User input validation
• Basic progressive web app support

Installation

Prerequisites

I created a Vagrant box with MongoDB, Node.js, Sails.js and Vue.js and also a Docker file. Or manually install Node.js and Sails.js.

Get Node.js

$ curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
$ sudo apt-get install -y nodejs

Get Sails.js

$ sudo npm install sails -g

Install modules

$ cd frontend && npm install
$ cd ../backend && npm install

Usage

Development

cd backend && sails lift and then cd ../frontend && npm run dev. After that, open localhost:8080 in your browser. Make sure that you start both servers simultaneously.

Production

First, you have to build up your Vue.js components and merge them with Sails.js. This can be done with cd frontend && npm run build. Now do cd ../backend && NODE_ENV=production node app.js and then open your browser and go to localhost:1337.

Commands

For a complete list see package.json.

Backend

Command	Description
sails lift	Run the Sails.js application in the current directory at localhost:1337.
npm run dev	Start Sails.js if you didn't install it globally.
npm run test	Run all available tests like unit or functional tests.

Frontend

Command	Description
npm run dev	Start the development server at localhost:8080.
npm run build	Minfiy, uglify and merge the application with Sails.js.
npm run test	Run all available tests like unit or functional tests.

Essential components used

The following components are used in this project. There are plenty more, though, check the package.json files.

Sails.js

This is the backend and data provider.

Vue.js

Handle frontend data with a MVVM.

Vuex

A state pattern.

BootstrapVue

Frontend framework. The design part.

vue-resource

HTTP client for Vue.js.

vue-router

Router for the frontend.

Starter template

If you want to start from scratch without any content take a look at the starter template made by Steven Hanna. It uses the same setup as this example.

Code style

This project fulfils the JavaScript Standard Style.

Author

Julian Claus and contributors.

License

MIT