For my hackathon project I decided to create a URL shortener, using two serverless technologies: Serverless Framework and MongoDB Atlas.
Choose Your Own Adventure
My application is separated into two different repositories:
- Backend for handling entry creation and redirects
- Frontend for displaying form and utilising API
Backend is created with Serverless Framework and is using NodeJS as a runtime. It is hosted on AWS Lambda.
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.
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
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...…
Frontend is created with NuxtJS framework and is hosted on GitHub pages.
# 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
For detailed explanation on how things work, check out the documentation.
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.
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.
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…
Project is available on https://www.mubo.one.