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.

To see this project in action, click here. Warning: Since free Heroku applications sleep after 30 minutes of inactivity (no web request occurred), the application may need to wake up first, which can take some seconds.

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.

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

$ sudo npm install sails -g

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

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.

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.

Run the Sails.js application in the current directory at localhost:1337.

$ sails lift

Start Sails.js if you didn't install it globally.

$ npm run dev

Run all available tests like unit or functional tests.

$ npm run test

Start the development server at localhost:8080.

$ npm run dev

Minfiy, uglify and merge the application with Sails.js.

$ npm run build

Run all available tests like unit or functional tests.

$ npm run test

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
• Dedicated mobile version
• Socket.IO usage
• Local storage plus cookie authentication

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

This is the backend and data provider.

Handle frontend data with a MVVM.

A state pattern.

Frontend framework. The design part.

HTTP client for Vue.js.

Router for the frontend.

This project fulfils the JavaScript Standard Style.