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.
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...…Frontend
Frontend is created with NuxtJS framework and is hosted on GitHub pages.
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
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.
Top comments (2)
@timotej_avsec hey, it's cool. but why this web not work?
hi @nandhahacker1, thanks for noticing! I actually forgot to enable CORS 🤦♂️ . It should work now 😃