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 N
ode.js/Express and M
- 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.
Step 1: Create a MongoDB database on MongoDB Atlas
We need to connection string like this..
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
- Express : A node.js framework that makes it easy to build web
- 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
- 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.
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.
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.
/api/shorturl/new— Create new url
/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.