DEV Community

Timotej Avsec
Timotej Avsec

Posted on

How I created URL shortener using Serverless and MongoDB

Overview of My Submission

For my hackathon project I decided to create a URL shortener, using two serverless technologies: Serverless Framework and MongoDB Atlas.

Submission Category:

Choose Your Own Adventure

Link to Code

My application is separated into two different repositories:

  • Backend for handling entry creation and redirects
  • Frontend for displaying form and utilising API

Backend

Backend is created with Serverless Framework and is using NodeJS as a runtime. It is hosted on AWS Lambda.

GitHub logo timotej-avsec / mubo-backend

Serverless backend for Mubo URL shortener

Serverless Framework Node REST API on AWS

This template demonstrates how to make a simple REST API with Node.js running on AWS Lambda and API Gateway using the traditional Serverless Framework.

This template does not include any kind of persistence (database). For a more advanced examples check out the examples repo which includes Typescript, Mongo, DynamoDB and other examples.

Usage

Deployment

This example is made to work with the Serverless Framework dashboard which includes advanced features like CI/CD, monitoring, metrics, etc.

$ serverless login
$ serverless deploy

To deploy without the dashboard you will need to remove org and app fields from the serverless.yml, and you won’t have to run sls login before deploying.

After running deploy, you should see output similar to:

Serverless: Packaging service
Serverless: Excluding development dependencies...
Serverless: Creating Stack...
Serverless: Checking Stack create progress...
........
Serverless: Stack create finished...
Serverless: Uploading CloudFormation file to S3...
Enter fullscreen mode Exit fullscreen mode

Frontend

Frontend is created with NuxtJS framework and is hosted on GitHub pages.

GitHub logo timotej-avsec / mubo-frontend

URL shortener with statistic tracking

mubo-frontend

Build Setup

# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm run start

# generate static project
$ npm run generate
Enter fullscreen mode Exit fullscreen mode

For detailed explanation on how things work, check out the documentation.

Special Directories

You can create the following extra directories, some of which have special behaviors. Only pages is required; you can delete them if you don't want to use their functionality.

assets

The assets directory contains your uncompiled assets such as Stylus or Sass files, images, or fonts.

More information about the usage of this directory in the documentation.

components

The components directory contains your Vue.js components. Components make up the different parts of your page and can be reused and imported into your pages, layouts and even other components.

More information about the…

Additional Resources / Info

Project is available on https://www.mubo.one.

Screenshot

Top comments (2)

Collapse
 
jacksonkasi profile image
Jackson Kasi

@timotej_avsec hey, it's cool. but why this web not work?

Collapse
 
timotej_avsec profile image
Timotej Avsec

hi @nandhahacker1, thanks for noticing! I actually forgot to enable CORS 🤦‍♂️ . It should work now 😃