I’ve been going through Free Code Camp and after finishing the front-end “ziplines” (which require a writeup of their own, eventually) I’m finally getting set for the fullstack “basejumps.”
However, on their “Get Set” module, I ran into some problems with Cloud9 (primarily the memory issue), so I decided to figure out how to do some of these things on my local machine.
This is primarily a document for me to refer to when I create more fullstack apps, but may as well share it.
Note that I am using OS X. I provide no guarantees in this document, as I’m writing it as it worked for me. Feel free to leave a comment though.
Step 0: get your environment set up
Next, you should install nvm by running the following script in your terminal:
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.26.0/install.sh | bash
wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.26.0/install.sh | bash
The stablest node is
node v0.12.7 as of this writing.
I’m going to assume that you are in your project directory now. My project directory is
/sample so keep that in mind going forward.
Step 1: Get Yeoman started up
Copy this into your terminal. Note that you must replace [YOUR_USERNAME_HERE] with your username:
echo "export NODE_PATH=$NODE_PATH:/Users/[YOUR_USERNAME_HERE]/.nvm/versions/node/v0.12.7/lib/node_modules/npm/" >> ~/.bashrc && source ~/.bashrc && npm install -g yo grunt grunt-cli generator-angular-fullstack && yo angular-fullstack
This will install grunt, grunt-cli, and yeoman’s Fullstack Angular generator.
What would you like to write markup with? HTML
What would you like to write stylesheets with? CSS
What Angular router would you like to use? ngRoute
Would you like to include Bootstrap? Yes
Would you like to include UI Bootstrap? Yes
Would you like to use MongoDB with Mongoose for data modeling? Yes
Would you scaffold out an authentication boilerplate? Yes
Would you like to include additional oAuth strategies? Twitter
Would you like to use socket.io? No
May bower anonymously report usage statistics to improve the tool over time? (Y/n) Y ```
If the last step fails (the
bower install and
npm install) then run it manually:
bower install && npm install
Step 2: Install MongoDB
This part was complicated. But here we go.
First, install MongoDB (I used Homebrw):
brew install mongodb
IF all goes well, type the following into your terminal:
mkdir data && echo 'mongod --dbpath=data --nojournal --rest "$@"' > mongod && chmod a+x mongod
Note that the Free Code Camp tutorial has this extra line:
--bind_ip=$IP, which didn’t work on my machine. I will find out soon enough if omitting it causes any problems.
Now, to start your database, just run…
Easy as pie.
Step 3: Start your server
This one is easy:
A new window should automatically open up with Yeoman saying “Allo Allo!”
Step 4: Set up git
git init && git add . && git commit -am 'initial commit'
Then log into your github, and create a new repo, and use the instructions for pushing an existing repo onto github.
It’ll look something like this:
git remote add origin [YOUR_GITHUB_REPO]
git push -u origin master
Step 5: Set up Heroku
Make an account on Heroku (you might need to enter CC info to use MongoDB), and then type the following into your terminal:
npm install grunt-contrib-imagemin --save-dev && npm install --save-dev && heroku login
Follow the prompts to get Heroku up and running!
Finally, to set up MongoDB, run the following:
cd dist && heroku config:set NODE_ENV=production && heroku addons:create mongolab
Incidentally, you can open heroku from the
dist folder by simply running
Now, your Angular Fullstack app is good to go. Best of luck with your new app!