5 steps to set up a modular Node.js environment in less than 30 minutes

Setting up a development environment is one of the biggest pain points when you start getting into anything beyond HTML/CSS. I know I’ve had my fair share of problems. Luckily, thanks to people like corban baxter, Nick Stevens and the dev teams I’ve worked with at Made and Quick Left, I’ve figured out how to make things a little less painful. And I’d like to help you avoid the pains I experienced along the way.

This article will help you get your first environment set up in less than half an hour.

Start your timer

Step 1 | Clone this repo and follow the readme.

corbanb/bdw-blog

After you run this command:

$ npm install -g yo generator-express

You need to run:

$ yo express

This will set up the environment. You will be asked what generator you’d like to use, if you want a new directory created, what framework, view engine, css preprocessor, database and what build tool to use. If you don’t know, I use these settings:

Generator: Express

New Directory?: No

Framework: MVC

View Engine: Swig

Preprocessor: Sass

Database: MongoDB

Build Tool: Gulp

But if you have more experience and want something different, use the tools you prefer! However, I’m going to run through this with these settings, so if you do something different and get stuck this may or may not be able to help you out.

Note: I set up my environment using Swig because that’s what I’m most familiar with and I haven’t needed to do anything beyond its capabilities thus far. However, you should know that as of 6/15 the documentation isn’t regularly updated anymore. You might want to consider using Jade or check out this templating engine chooser for more options.

Step 2 | Create modularity within your directory

I’ve written about the importance of modularity in your designs but can’t express how much more important it is in your code. Not only will it keep you organized, which will speed up your process, but it will also help others you may end up handing this code off to.

Here’s what my directory typically looks like

In order to properly pipe everything to the public file, you’re going to need to change the gulpfile.js file and install a couple npm packages.

Install the gulp-plumber package by running this in your terminal

$ npm install gulp-plumber

and install the gulp-ruby-sass package as well

$ npm install gulp-ruby-sass

Also, make sure you update your .gitignore file so that it ignores your sass-cache, .map file and other things that don’t need to be saved.

Lastly, make sure the styles link in your layout.swig file is updated to match your styles.css file name.

Step 3 | Set up your Heroku App

If you haven’t already signed up for Heroku, do that first. Then hit your dashboard and click the ‘Create New App’ button in the top right

Name your app and press ‘Create App’ when you’re done.

Next we’re going to add a remote branch for our Heroku app so we can push to it from the command line. To do this, run this command:

$ heroku git:remote -a your-app-name

And if you run the

$ git remote

command you should now see origin and heroku listed as remote branches.

Now you have the ability to push to your Github repot by running

$ git push origin master

and to your Heroku app by running

$ git push heroku master

But pushing to heroku at this point doesn’t mean you’ll have a working site just yet. You still need a database connected in order for it to be built properly on Heroku!

Step 4 | Connect to a MongoLab DB

If you chose MongoDB in your settings, it’s super easy to set up a database. All you have to do is run this command in your terminal, within the root directory of your site

$ heroku addons:create mongolab:sandbox

If you successfully do this, you should see this in your terminal

But before we can push to Heroku and view our site, we need to change our config vars to include our MongoDB URI. To find out what your URI is, run this in your terminal

$ heroku config | grep MONGOLAB_URI

It should show you something like this in your terminal

Now we need to add that to our config vars. Within your config directory you should see a config.js file. Open that file and put your URI as a string for the db key under your ‘development’ environment.

Last step, in order to make this work when you push to your Heroku app, is to reconfigure the production environment vars. It should look like this:

Now you should be able to push to your Heroku app. I’d recommend first doing a push to Github though.

$ git push origin master

then push to Heroku

$ git push heroku master

You can also connect your Heroku app to your Github repo so that whenever you push to Github your Heroku gets updated but I prefer to do it manually so my site isn’t ever broken.

Our next steps are simply checking out if we did it right!

Step 5 | Check if it’s working

The final test is to see if everything is working locally and on Heroku.

To test locally, run the gulp command in your terminal then hit localhost:3000 in your browser. If your styles don’t match mine exactly, don’t worry. If you want to check for differences, check out my finished example repo on Github to compare code.

$ gulp

Your app should look very similar to mine, but will probably be slightly different based on the styles you have

If you’ve pushed to Heroku andit told you that your app has been successfully built and deployed, check it out at your-app-name.heroku.com. You should see the exact same thing on your screen as what you saw when you hit your app at localhost:3000.

And that’s it

It took me a total of 17 minutes and 5 seconds to accomplish this. It took me 10 times longer to write this article. Seriously.

Obviously I have some practice, but I think you should be able to accomplish this within half an hour. If you get stuck, check out my finished example repo on Github and compare your code to mine.

I’d love to know how long it takes you! Leave a comment when you finish!

Resources

There are probably lots of questions you’re gonna have once you get into things, and I’d be more than happy to answer what I can, but these are some great resources if you get stuck.

Heroku and Node.js

Getting Started with Node.js on Heroku

MongoLab Tips

MongoLab

Node.js ProTip Links

How do I get started with Node.js

Connecting your Domain

In order to use the domain you purchased, you’re going to have to point your Heroku app to that domain by creating a custom domain name for your application and following the appropriate steps required within your DNS. I used NameCheap, so that’s what I’m going to show you.

If you liked this article, please recommend it so others stumble upon it as well! You might also like some of my other articles:

The Unicorn Workflow: Design to Code with Atomic Design Principles and Sketch

6 Things that take your UX from Above Average to World-Class

You’re Burning Budget on Design: How to Save Time and Money with Modular Design

I am currently a Product Designer and Engineer at Quick Left in Boulder, CO and a guest blogger for InVision.

If you’d like to connect, follow me here or find me on Twitter or LinkedIn. If you want first on my content join my email list to get weekly updates from me.