Build & Deploy a Full Stack URL Shortener with Node.js, React, TypeScript & MongoDB
In this guide we are going to build & deploy a full stack URL shortener with Node.js, React, TypeScript & MongoDB. You can follow along by watching the video associated with each section, or by reading the guide.
Finish repository: https://github.com/TomDoesTech/FS-URL-shortener-tutorial
By following along with this guide you will learn:
- How to build a REST API with Node.js, Express, Mongoose & TypeScript
- How to build a simple React.js application with TypeScript
- How to deploy a Node.js server with Caddy on a DigitalOcean droplet
Part 1 — Building the backend
Create a new directory for your application and inside that directory, create a directory for the server. Then, initialize the application with yarn init. You can press enter on all the questions.
mkdir url-shortener
cd url-shortener
mkdir server
cd server
yarn init
Initalizer the application to be a TypeScript application with:
npx typescript --init
This will create a tsconfig.json file for you.
Install the required dependencies with:
yarn add express cors body-parser config mongoose yup nanoid
Install the development dependencies with:
yarn add @types/node @types/body-parser @types/config @types/express @types/nanoid @types/node @types/yup typescript ts-node -D
