ndabAP / Vue Sails Example
Programming Languages
NOT MAINTAINED 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
- Progressive web app support
- State persistence
- Natural language processing
Installation
Prerequisites
To get started, you need Node.js. It's also recommend to have Sails.js globally installed. If you don't want to have Sails.js globally installed just use npm run dev. Finally, install the Node.js modules.
Get Node.js
$ curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
$ sudo apt-get install -y nodejs
Get Sails.js (optional)
$ 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 serve. 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
Backend
For a complete list see package.json.
| Command | Description |
|---|---|
npm run dev |
Start Sails.js if you didn't install it globally |
npm run dev:watch |
Start Sails.js with watch mode if you didn't install it globally (this will delete new products) |
npm run test |
Run all available tests like unit or functional tests |
Frontend
For a complete list see package.json.
| Command | Description |
|---|---|
npm run serve |
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
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
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