FreeCodeCamp-APIs and Microservices — URL Shortener Microservice

FreeCodeCamp

This project is FreeCodeCamp‘s third APIs and Microservices Project. In this project, we’ll be create a simple URL shortener API.

We’ll be using Node.js/Express and MongoDB

Outline

• Create a MongoDB database on MongoDB Atlas.
• Install all the required npm packages.
• Define the environment variables.
• Create an express server.
• Connect to the database.
• Create the URL Model.
• Create the API routes post and get methods.
• Conclusion

Step 1: Create a MongoDB database on MongoDB Atlas

We learned before create a MongoDB database on MongoDB Atlas. You can check out the Freecodecamp MongoDB lecture and MongoDB documentation for more information.

We need to connection string like this..

MongoDB — Connection String

Copy the connection string at the bottom and paste it somewhere for now. We will use it in our application to connect to the database.

Finally, our database set up is OK. Time to set up our project packages.

Step 2: Install all the required npm packages

Our project will need some npm packages and below is the list of
those packages.

• Express : A node.js framework that makes it easy to build web
  applications.
• Mongodb : Official MongoDB driver for Node.js
• Mongoose : An object modeling tool designed to work in an
  asynchronous environment. We will use mongoose to define database
  schemas and interact with the database.
• Cors : CORS is a node.js package for providing a Connect/Express middleware that can be use to enable CORS with various options.
• Body-parser :Node.js body parsing middleware. Parse incoming request bodies in a middleware before your handlers, available under the req.body property.
• Valid-url : This module collects common URI validation routines to make input validation, and untainting easier and more readable.
• Shortid : Amazingly short non-sequential url-friendly unique id generator.

Now that we know what each of those packages will do, let’s go ahead and
install them. If you use freecodecamp boilerplate link you need just valid-url and shortid packages. Other packages comes with boilerplate. Open the package.json file and you can see Add Package button on the top side, install shortid and valid-url packages.

package.json

Step 3: Define the environment variables

Open the .env file and add the following environment variable.

We have got MongoDB connection string at Step-1. Copy and paste your string from MongoDB Atlas. You have to fill your username and password area.

MONGO_URI=’mongodb+srv://<yourusername>:<yourpassword>@cluster0-lewgd.mongodb.net/test?retryWrites=true&w=majority’

Step 4: Create an express server

We used the Freecodecamp boilerplate, open the server.js file. You can see our express server is already created.

If you didn’t use the boilerplate head over to server.js file and type the following code. Also, you should create your HTML and CSS files for front end. CSS file should be under the public folder, HTML file should be under the views folder.

Open your terminal you should be seeing ;

Node.js listening ...

That means we’ve successfully set up our express server.

Step 5: Connect to the database

Go to server.js file and type the code below.

We required mongoose into our file on the topside. Use the mongoose connect method; the first one is the database URL and the second one is an object of options. We, therefore, supply the useNewUrlParser and useCreateIndex to avoid such deprecation warnings.

We have a pending connection to the test database running on localhost. We now need to get notified if we connect successfully or if a connection error occurs:

You can see more information on the mongoosejs docs.

That’s all we will need to create our connection to the database.

Step 6: Create the URL model

Now it’s time to define our URL model.

We create our mongoose schema which takes in an object. This object
defines the different properties of the schema. In this project, we’ll use string properties. But mongoose provides us to with all these options that you can easily define on your properties.

On the bottom line, we create a model called URL and pass it our schema and we then export the module so that it can be re-used in other files.

Step 7: Create The API routes post and get methods

Time to create our routes.

• HTTP POST /api/shorturl/new — Create new url
• HTTP GET /api/shorturl/:short_url? — Get original url via shorturl

In this code snippet above, we created post request route. The URL router creates a new URL along with the given information that we access from the req.body. Before the saving URL, we check the input is valid or not, after that generate a short URL. We check if it’s already in the database but we can use the unique properties in our model. If we use these properties every URL will be unique. But in this project, I choose this method.

Now we use the get method for the find original URL via our short URL. If we find the original URL our browser will be redirected to the original URL.

Step 7: Conclusion

We’ve come a very short but useful way and I hope you’ve been able to learn something from this tutorial.

Here is the live version on the glitch and code repository.
Cheers!!