Build an Online Shop with Vue

Provisioning a MongoDB Database

MongoDB is our database, and there are tons of ways to provision one. While we could setup and configure MongoDB locally, the easiest is to create a free cloud database instance. Doing so gives you a connection URL which you can plug into mongoose and good start creating and interacting with data.

The only downside with cloud database is, when working offline, you can't successfully connect to your database. In that case, you will need to download and install an instance of MongoDB on your machine. You can do so via the MongoDB website.

We will just stick with the cloud option because it's easier to get started with. MongoLab is the most popular because of the free tier and how easy it is to setup and integrate with different platforms.

Let's create an instance:

  1. Create a MongoLab account if you don't have one.
  2. Create a new database as shown in the following image:

  1. You should see your database listed on the MongoDB deployments

  1. Click on the deployment to see more information and settings. Go to the Users tab and create a user as shown below. The user credentials will be used to create a connection from your app using the URL

Connect to Database with Mongoose

With the database created, you need to connect to it to your app. Go to app.js and replace the commented place holder that reads // Database connection here with:

//...
mongoose.connect(`mongodb://${process.env.DB_USER}:${process.env.DB_PASSWORD}@${process.env.DB_URL}`);
//...

Note we are not hard-coding the credentials in the connection string. Rather, we are making use of environmental variables to set them up at execution time. This has lots of benefits including security.