Modern web applications has separated front- and backend sides to use. This 'boilerplate' present one way to make your application which have fully separated back- and frontend sides. And really this is more than just a boilerplate, proper term would be 'example application'.
- Separate back- and frontend development
- Authenticate with backend (possible multiple ways: local,
github, twitter,etc.) - Power of AngularJS + WebSockets
- Simple examples how to use these
- Provide real start point of new applications
backend= Sails.js server, just API nothing else repositoryfrontend= Angular SPA, just frontend side repository
Also note that these 'directories' are just submodules to another repos
For backend side this boilerplate uses Sails.js (imho awesome). See more info at https://github.com/balderdashy/sails I have just done some small tweaks to generic workflow of sails nothing else. Backend side of this 'boilerplate' is served on separate repository https://github.com/tarlepp/angular-sailsjs-boilerplate-backend
Boilerplate uses slush-angular for frontend (AngularJS using Google Angular App Structure Recommendations). See more info at https://github.com/slushjs/slush-angular This library is awesome to distribute frontend. Frontend side of this 'boilerplate' is served on separate repository https://github.com/tarlepp/angular-sailsjs-boilerplate-frontend
- Sails.js, http://sailsjs.org/
- slush-angular, https://github.com/slushjs/slush-angular
- AngularJS, https://angularjs.org/
- Bootstrap, http://getbootstrap.com/
- Techniques for authentication in AngularJS applications, https://medium.com/opinionated-angularjs/7bbf0346acec
- Json Web Tokens, http://angular-tips.com/blog/2014/05/json-web-tokens-examples/
First of all you have to install npm and node.js to your box. Installation instructions can
be found here.
After that you need to install bower, gulp and sails main packages to make all
things to happen. These can be installed with following commands on your *nix box.
sudo npm install bower gulp sails -g
After that you need to download codes of this project to your computer, please follow instructions below.
Navigate yourself to directory where you downloaded or cloned this repo and run following command on shell:
npm install
That will install all needed packages for back- and frontend. If this won't work you could try first to initialize back- and frontend submodules with following command:
git submodule update --init --recursive
Also you might need to run npm install command on each of those directories (backend and
frontend).
You can configure your backend and frontend applications to use your environment specified
settings. Basically by default you don't need to make any configurations at all. With default configuration backend will
be run on http://localhost:1337 and frontend on http://localhost:3001 (development) http://localhost:3000 (production).
There is an example of backend configuration file on following path.
/backend/config/local_example.js
Just copy this to /backend/config/local.js and make necessary changes to it. Note that this
local.js file is in .gitignore so it won't go to VCS at any point.
There is an example of front configuration file on following path.
/frontend/config/config_example.json
Just copy this to /frontend/config/config.json and make necessary changes to it. Note that this
config.json file is in .gitignore so it won't go to VCS at any point.
If you're changing your backend API url to another than http://localhost:1337 you need to make
frontend/config/config.json with proper content on it. Use that example file as start.
You have to start both backend and frontend servers to run this project. You can do this
by running following command on your project root directory:
npm start
This will start back- and frontend applications for you. And if you need to start those separately see following docs about that.
cd backend sails lift
This will start sails.js server on defined port. By default this is accessible from http://localhost:1337 url. If you
try that with your browser you should only see page that contains Not Found message on it. This means that
everything is ok.
cd frontend gulp serve
This will start simple web server that you can use within developing frontend side. By default this is accessible from http://localhost:3001 url. You should be see login page if you try that url with your browser.
As in production
cd frontend gulp dist
This will create a deployment code to frontend/dist folder. After that you can serve those static HTML, CSS,
Javascript and asset files by any web server you like (Apache, nginx, IIS, etc.). For testing this production ready code
you can also use gulp production command which will serve those dist files. By default this is accessible from
http://localhost:3000 url.
Below is small list of possible failures that can occur while trying this POC.
- Sails won't lift and you get error message like:
Fatal error: watch ENOSPC- http://stackoverflow.com/questions/16748737/grunt-watch-error-waiting-fatal-error-watch-enospc
- tl;dr just run
npm dedupe
- Frontend side is missing some 3rd party libraries. eg. browser console is full of some errors.
- Try to install bower packages manually by command
bower installinfrontenddirectory.
- Try to install bower packages manually by command
- When running gulp serve from the frontend directory an error of 'scss-lint' is not recognized.
- Try running gem install scss-lint from the frontend directory.
This might be up and running... or not. http://wunder.sytes.net:3000/
- All in my own sails.js projects, @tarlepp
- Hackday 2015 - infoTV
- Liukko-POC
- switch168
- home-dashboard
If you're using this please make PR and add your project to this list.
Tarmo Leppänen
The MIT License (MIT)
Copyright (c) 2015 Tarmo Leppänen