app for https://angularclass.com
This is a MEAN stack app using ES6. Babel
is the transpilers in use, and right now, the fromt end
uses a combo of Gulp
and Webpack
. the backend is still using JSPM
but should and will be changes to use
Weboack
as well.
The fron end uses a component approach similar to React, just take a look through it and you'll see.
The backend use a SOA
similar to the front end. Again, take a look. Because the backend is still using
JSPM
we have a mix of require
and import
statments. Just require
node_modules and import
your files.
Here's a list of things you need.
node
version >=.12
(usenvm
to manage versions)- mongo
npm
globalskarma
karma-cli
webpack
gulp
bower
jspm
fork
this babyclone
your fork- make sure you have above dependencies
npm i
bower i
All that will install all the needed dependencies for you.
After you have installed everything, you can start building things.
Note
because the backend uses JSPM
, all paths in import
on the backend are relative to the server
folder but all paths in require
work as usual, relative the the current file. This is changing soon. The fron end is using webpack
so all paths are relative to the current file.
-
checkout a new branch in this format
- [featureNmae/yourName]
- example
git checkout -b blogListAnimations/scott
-
open a new terminal window and run
mongod
to start mongo. -
open a new terminal window and run
gulp
. Check out the list of tasks you can run. -
run test
npm test
-
check for issues
-
if you select an issue to work on, assign yourself to it so no one else does it
-
after you make your changes and tests pass, commit them using the following format
-
Pull from
remote/dev
-
push to your
fork/branch
-
only submit a PR when you have completed the issue, and open a PR againts
remote/dev
-
wait for CodeShip (CI) runs your test
-
if tests pass, assign PR to @Hendrixer
-
Watch for comments on code sugestions / changes
-
Make any changes and update PR
All tasks are ran by Gulp
nodemon
- starts the node server
serve
- will serve the front end through
browser-sync
wich has live reloading - it will proxy the node server on port
3000
to port9000
- will serve the front end through
webpack
- will run our client code through webpack wich will
- turn ES6 to ES5
- bundle all js files
- create
app/bundle.js
- will run our client code through webpack wich will
secrets
- this is for CI and deployment
- because you can't conditionally use
import
likerequire
- During dev, you should have the
server/config/sercrets.js
file with all secrets, but when we deploy that file is not checked in, and because the server will alwaysimport
it, it breaks. This tasks makes a blank file.
watch
- this tasks watches client side code and calles
webpack
again and reloads the browser
- this tasks watches client side code and calles
default
- runs
nodemon, webpack, serve, watch
- runs
[changeType](module/component): small description
<!-- blank line -->
longer description (closes:fixes: breaking changes)
List of changeTypes
- feature - new feature
- fix - bug fix (typo, test, etc)
- chore - refactoring, changing files around, etc
- spec - adding test
- docs - updaing or creating docs
Here is an example of a commit message for a new feature
feature(admin): add ability for admins to invite authors
closes #23
Breaking changes: Changed author.name to author.first_name and author.last_name
Here is an example for a commit message for a bug fix
fix(blog): fix typo
Testing is done with mocha on both back and front. All test are written in ES6. The front end uses Karma and webpack, the back uses JSPM.
To run all test - npm test
.
To run frontend test karma start
To run backend run node server/test.js
- we use mocha
pragmatically because of JSPM
. This is chagning to webpack.
This is not solid yet. Right now, we're deployed on Heroku
. Using the integration with github, heroku will deploy when it sees a push
to the master branch. We might automate this with our CI Codeship
instead. Stay tuned.