├── .gitignore ├── .gitmodules ├── LICENSE ├── README.md └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | ################################################ 2 | ############### .gitignore ################## 3 | ################################################ 4 | # 5 | # This file is only relevant if you are using git. 6 | # 7 | # Files which match the splat patterns below will 8 | # be ignored by git. This keeps random crap and 9 | # and sensitive credentials from being uploaded to 10 | # your repository. It allows you to configure your 11 | # app for your machine without accidentally 12 | # committing settings which will smash the local 13 | # settings of other developers on your team. 14 | # 15 | # Some reasonable defaults are included below, 16 | # but, of course, you should modify/extend/prune 17 | # to fit your needs! 18 | ################################################ 19 | 20 | ################################################ 21 | # Miscellaneous 22 | # 23 | # Common files generated by text editors, 24 | # operating systems, file systems, etc. 25 | ################################################ 26 | 27 | *~ 28 | *# 29 | .DS_STORE 30 | .netbeans 31 | nbproject 32 | .idea 33 | .node_history 34 | -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "backend"] 2 | path = backend 3 | url = https://github.com/tarlepp/angular-sailsjs-boilerplate-backend.git 4 | [submodule "frontend"] 5 | path = frontend 6 | url = https://github.com/tarlepp/angular-sailsjs-boilerplate-frontend.git 7 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | ===================== 3 | 4 | Copyright (c) 2015 Tarmo Leppänen 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 'Boilerplate' for AngularJS + Sails.js 2 | 3 | ### Why? 4 | Modern web applications has separated front- and backend sides to use. This 'boilerplate' present one way to make 5 | your application which have fully separated back- and frontend sides. And really this is more than just a 6 | boilerplate, proper term would be 'example application'. 7 | 8 | ### Main goals of this boilerplate 9 | * Separate back- and frontend development 10 | * Authenticate with backend (possible multiple ways: local, ~~github, twitter,~~ etc.) 11 | * Power of AngularJS + WebSockets 12 | * Simple examples how to use these 13 | * Provide real start point of new applications 14 | 15 | ### Directory structure 16 | * ```backend``` = Sails.js server, just API nothing else [repository](https://github.com/tarlepp/angular-sailsjs-boilerplate-backend) 17 | * ```frontend``` = Angular SPA, just frontend side [repository](https://github.com/tarlepp/angular-sailsjs-boilerplate-frontend) 18 | 19 | Also note that these 'directories' are just submodules to another repos 20 | 21 | #### Backend 22 | [![GitHub version](https://badge.fury.io/gh/tarlepp%2Fangular-sailsjs-boilerplate-backend.svg)](https://badge.fury.io/gh/tarlepp%2Fangular-sailsjs-boilerplate-backend) 23 | [![Build Status](https://travis-ci.org/tarlepp/angular-sailsjs-boilerplate-backend.png?branch=master)](https://travis-ci.org/tarlepp/angular-sailsjs-boilerplate-backend) 24 | [![Dependency Status](https://david-dm.org/tarlepp/angular-sailsjs-boilerplate-backend.svg)](https://david-dm.org/tarlepp/angular-sailsjs-boilerplate-backend) 25 | [![devDependency Status](https://david-dm.org/tarlepp/angular-sailsjs-boilerplate-backend/dev-status.svg)](https://david-dm.org/tarlepp/angular-sailsjs-boilerplate-backend#info=devDependencies) 26 | 27 | For backend side this boilerplate uses Sails.js (imho awesome). See more info at https://github.com/balderdashy/sails 28 | I have just done some small tweaks to generic workflow of sails nothing else. Backend side of this 'boilerplate' is 29 | served on separate repository https://github.com/tarlepp/angular-sailsjs-boilerplate-backend 30 | 31 | #### Frontend 32 | [![GitHub version](https://badge.fury.io/gh/tarlepp%2Fangular-sailsjs-boilerplate-frontend.svg)](https://badge.fury.io/gh/tarlepp%2Fangular-sailsjs-boilerplate-frontend) 33 | [![Build Status](https://travis-ci.org/tarlepp/angular-sailsjs-boilerplate-frontend.png?branch=master)](https://travis-ci.org/tarlepp/angular-sailsjs-boilerplate-frontend) 34 | [![Dependency Status](https://david-dm.org/tarlepp/angular-sailsjs-boilerplate-frontend.svg)](https://david-dm.org/tarlepp/angular-sailsjs-boilerplate-frontend) 35 | [![devDependency Status](https://david-dm.org/tarlepp/angular-sailsjs-boilerplate-frontend/dev-status.svg)](https://david-dm.org/tarlepp/angular-sailsjs-boilerplate-frontend#info=devDependencies) 36 | 37 | Boilerplate uses slush-angular for frontend (AngularJS using Google Angular App Structure Recommendations). 38 | See more info at https://github.com/slushjs/slush-angular This library is awesome to distribute frontend. Frontend side 39 | of this 'boilerplate' is served on separate repository https://github.com/tarlepp/angular-sailsjs-boilerplate-frontend 40 | 41 | ### Used libraries, guides, etc. 42 | * Sails.js, http://sailsjs.org/ 43 | * slush-angular, https://github.com/slushjs/slush-angular 44 | * AngularJS, https://angularjs.org/ 45 | * Bootstrap, http://getbootstrap.com/ 46 | * Techniques for authentication in AngularJS applications, https://medium.com/opinionated-angularjs/7bbf0346acec 47 | * Json Web Tokens, http://angular-tips.com/blog/2014/05/json-web-tokens-examples/ 48 | 49 | ### Installation 50 | First of all you have to install npm and node.js to your box. Installation instructions can 51 | be found [here](http://sailsjs.org/#/getStarted?q=what-os-do-i-need). 52 | 53 | After that you need to install bower, gulp and sails main packages to make all 54 | things to happen. These can be installed with following commands on your *nix box. 55 | 
 56 | sudo npm install bower gulp sails -g
 57 |
58 | 59 | After that you need to download codes of this project to your computer, please follow instructions below. 60 | 61 | #### Back- and frontend installation 62 | Navigate yourself to directory where you downloaded or cloned this repo and run following command on shell: 63 | 
 64 | npm install
 65 |
66 | 67 | That will install all needed packages for back- and frontend. If this won't work you could try first to initialize 68 | back- and frontend submodules with following command: 69 | 70 | 
 71 | git submodule update --init --recursive
 72 |
73 | 74 | Also you might need to run ```npm install``` command on each of those directories (backend and 75 | frontend). 76 | 77 | #### Configuration 78 | You can configure your backend and frontend applications to use your environment specified 79 | settings. Basically by default you don't need to make any configurations at all. With default configuration backend will 80 | be run on http://localhost:1337 and frontend on http://localhost:3001 (development) http://localhost:3000 (production). 81 | 82 | ##### Backend 83 | There is an example of backend configuration file on following path. 84 | 85 | 
 86 | /backend/config/local_example.js
 87 |
88 | 89 | Just copy this to /backend/config/local.js and make necessary changes to it. Note that this 90 | local.js file is in .gitignore so it won't go to VCS at any point. 91 | 92 | ##### Frontend 93 | There is an example of front configuration file on following path. 94 | 95 | 
 96 | /frontend/config/config_example.json
 97 |
98 | 99 | Just copy this to /frontend/config/config.json and make necessary changes to it. Note that this 100 | config.json file is in .gitignore so it won't go to VCS at any point. 101 | 102 | ##### Notes 103 | If you're changing your backend API url to another than http://localhost:1337 you need to make 104 | frontend/config/config.json with proper content on it. Use that example file as start. 105 | 106 | ### Running of this project 107 | You have to start both backend and frontend servers to run this project. You can do this 108 | by running following command on your project root directory: 109 | 110 | 
111 | npm start
112 |
113 | 114 | This will start back- and frontend applications for you. And if you need to start those separately see following docs 115 | about that. 116 | 117 | #### Backend 118 | 
119 | cd backend
120 | sails lift
121 |
122 | 123 | This will start sails.js server on defined port. By default this is accessible from http://localhost:1337 url. If you 124 | try that with your browser you should only see page that contains Not Found message on it. This means that 125 | everything is ok. 126 | 127 | #### Frontend 128 | 129 | ##### Development ##### 130 | 
131 | cd frontend
132 | gulp serve
133 |
134 | 135 | This will start simple web server that you can use within developing frontend side. By default this is accessible from 136 | http://localhost:3001 url. You should be see login page if you try that url with your browser. 137 | 138 | ##### Deployment ##### 139 | As in production 140 | 
141 | cd frontend
142 | gulp dist
143 |
144 | 145 | This will create a deployment code to ```frontend/dist``` folder. After that you can serve those static HTML, CSS, 146 | Javascript and asset files by any web server you like (Apache, nginx, IIS, etc.). For testing this production ready code 147 | you can also use ```gulp production``` command which will serve those dist files. By default this is accessible from 148 | http://localhost:3000 url. 149 | 150 | ### Possible failures 151 | Below is small list of possible failures that can occur while trying this POC. 152 | 153 |
    154 |
  1. Sails won't lift and you get error message like: Fatal error: watch ENOSPC 155 | 159 |
    2. 160 |
  2. Frontend side is missing some 3rd party libraries. eg. browser console is full of some errors. 161 | 164 |
    3. 165 |
  3. When running gulp serve from the frontend directory an error of 'scss-lint' is not recognized. 166 | 169 |
    4. 170 |
171 | 172 | ## Demo 173 | This might be up and running... or not. http://wunder.sytes.net:3000/ 174 | 175 | ## Who is using this? 176 | * All in my own sails.js projects, @tarlepp 177 | * [Hackday 2015 - infoTV](https://github.com/ProtaconSolutions/hackday-2015) 178 | * [Liukko-POC](https://github.com/ProtaconSolutions/Liukko-POC) 179 | * [switch168](https://github.com/switch168) 180 | * [home-dashboard](https://github.com/Hekku2/home-dashboard) 181 | 182 | If you're using this please make PR and add your project to this list. 183 | 184 | ## Author 185 | Tarmo Leppänen 186 | 187 | ## License 188 | The MIT License (MIT) 189 | 190 | Copyright (c) 2015 Tarmo Leppänen 191 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-sailsjs-boilerplate", 3 | "version": "1.0.0", 4 | "description": "Example boilerplate application for AngularJS + Sails.js with separated back- and frontend.", 5 | "keywords": [ 6 | "sails.js", 7 | "backend", 8 | "REST", 9 | "API", 10 | "JWT", 11 | "JSON Web Token", 12 | "Passport.js", 13 | "frontend", 14 | "angular", 15 | "slush", 16 | "slush-angular" 17 | ], 18 | "main": "", 19 | "dependencies": {}, 20 | "devDependencies": {}, 21 | "scripts": { 22 | "install": "git submodule update --init --recursive && cd backend && npm install && cd ../frontend && npm install", 23 | "start": "(cd backend && sails lift) & (cd frontend && gulp serve)", 24 | "test": "cd backend && mocha" 25 | }, 26 | "repository": { 27 | "type": "git", 28 | "url": "git://github.com/tarlepp/angular-sailsjs-boilerplate.git" 29 | }, 30 | "bugs": { 31 | "url": "https://github.com/tarlepp/angular-sailsjs-boilerplate/issues" 32 | }, 33 | "author": "Tarmo Leppänen", 34 | "license": "MIT" 35 | } 36 | --------------------------------------------------------------------------------