Deploying a MEAN stack app to Heroku

While going through GA’s WDI program, I created a MEAN stack app. I attempted to deploy it when I completed it, however I ran into issues and was too bogged down with classwork to really delve into how to deploy the application.

Today I revisited the app, Critique Me, and was able to successfully deploy it. I figured I’d share the steps here since deployment wasn’t as smooth as deploying Rails applications.

How to Deploy a MEAN stack app to Heroku:

  1. CD into the folder of the application you’d like to deploy. Make sure it’s a Git repo. Then run the following Heroku command in your terminal:
    $ heroku create app-name
  2. Push your updates to Heroku:
    $ git push heroku master
  3. If you visit your live app, you’ll run into an “Application Error.” To resolve this, you need to connect your app to Mongo by using MongoLab:
    $ heroku addons:add mongolab
  4. Heroku will automatically generate a key for Mongo Lab. To see what the key is, use the following command:
    $ heroku config
  5. In the file where you have your MongoDB connection, you’ll need to add the logic for connecting to the production environment. So instead of using the following line:
    mongoose.connect("mongodb://localhost/critique-me")

    You’d use something like this:
    mongoose.connect(process.env.MONGODB_URI)The “MONGODB_URI” refers to the key that’s been generated for MongoLab.

Hopefully this will be useful to anyone else out there who was struggling with their MEAN stack app deployment.

WDI Day Forty-Eight: Web Sockets and Lab Time

Web sockets are a way that users can interact in real time with each other on websites. During class we did a quick tutorial where we created a chatroom – it was some pretty cool stuff. After walking through the chatroom with socket.io, we tried to add Angular to the mix, and yet again it tripped me up a bit.

In the afternoon the instructors announced the web socket lab, where we will have to build a game with the MEAN stack and use web sockets. I can’t believe how many labs we’ve had – here I thought this weekend I would be able to get a head start on my final project. Looks like I’ll be refactoring the lab that was due this morning and have to complete yet another project.

I still feel pretty shaky with Angular JS, so I’m going to attempt to do several tutorials over the weekend. I did manage to put a basic MEAN stack framework in place for my lab project that I’ll work on customizing more tomorrow. I am also going to attempt to create Tic Tac Toe.

WDI Day Forty-Seven: MEAN Lab

The MEAN stack is pretty difficult to work with – at least it is for someone who is completely new to it. I enjoy working with Mongo DB, Node.js, and Express.js. The problem child in the stack is Angular – I’m realizing I’m not grasping everything that I thought I was.

Today was the last day to work on our MEAN stack lab. I decided to create an app where users can post their projects and have other users critique their projects. Users can upvote/downvote projects as well as critiques.

I was able to successfully complete the following:

  • Have users create new projects, delete existing projects, and view all projects
  • Have users upvote/downvote projects
  • Have users add critiques for different projects
  • Have users view all critiques made on projects
  • Have users upvote/downvote critiques
  • Seed the database with dummy data
  • Use show/hide Angular directives to make a better user experience

At this time, I have yet to do the following:

  • Allow users to update posts
  • Add the ability to delete comments
  • Create RegEx to prevent users from submitting critiques if the critique uses banned words or phrases
  • Polished styling (I was only able to do some preliminary styling)
  • Launch the app to Heroku

Although building this application was a huge struggle, I felt as though the application functioned a lot better than my project 3. It was also quite a learning experience!

WDI Day Forty-Four: Express & Mongo Intro

It’s been an exhausting week, but thankfully projects are over and today we had an introduction to Mongo and Express. We reviewed Mongo DB, which is a no SQL database, and used Mongoose to make queries. When it comes to databases, I’m realizing that I really enjoy working with querying for information. For some reason there’s something fun about that.

Express proved to be a little bit confusing. It made me realize that this weekend I need to review Angular JS and also do a little document diving with Express. I want to make sure things make a lot more sense to me in the upcoming weeks.

Resources