# Build your own Custom URL Shortener with ease

## Hey Fellas,

```text
This is my First Blog. Hope you all love it.
```

You all must have used and heard about of bit.ly, tinyurl.com, goo.gl, etc. and often seen many websites and apps providing you short-links like t.co/xxxxx (Twitter), epi.gm/xxxx (Epic Games), etc. 

When I saw them, I was very curious about them and wanted to have something of my own (*it looks cool, seriously ...*) .

## Use Case (Example)

https://go.url.me/ --> Our Base URL

https://go.url.me/github --> Link to your GitHub profile

https://go.url.me/discord --> Discord Server Invite Link

https://go.url.me/yt --> Link to you Youtube Channel

https://go.url.me/xxxx --> What ever you want ......

*(Look Cool Right ...)*


Let me show you how to have one of your own

# Getting Started

## Prerequisites 

* A CloudFlare Account with a Doamin (Free Plan or higher)
* GitHub Account
* Basic Knowledge of [GitHub Actions](https://github.com/features/actions)
* [Wrangler CLI](https://github.com/cloudflare/wrangler)
* Basic or Intermediate knowledge or JavaScript and CLI usage

![https://s3-us-west-2.amazonaws.com/assets.blog.serverless.com/cloudflare-workers/serverless-cloudflare-workers-header.png](https://s3-us-west-2.amazonaws.com/assets.blog.serverless.com/cloudflare-workers/serverless-cloudflare-workers-header.png)

## Concepts and Ideology

* We are going to use Wrangler to create a URL Shortener Application
* Our app is a serverless application
* We are using JSON as our primary database for storing links and it's short names
* We are storing our App as a project on GitHub
* We are going to use GitHub Action to deploy our app
* We are deploying to CloudFlare Workers
* CloudFlare workers hosts our application 24/7 for free. ([limitation](https://developers.cloudflare.com/workers/platform/limits#worker-limits) apply)

## Phase 1 :-

1. Create a Cloudflare account. (If you don't have one)

2. Install [Wrangler CLI](https://github.com/cloudflare/wrangler)
```bash
npm i @cloudflare/wrangler -g
```

3. Create a new Wrangler App using Template
```bash
wrangler generate <your-project-name> https://github.com/BRAVO68WEB/url-short-cfw
```
Output :- 
```
 Creating project called `bravo68web`...
Error:  Error replacing placeholders `E:\CFW\bravo68web\.github\workflows\cfw.js.yml`
Info: caused by liquid: Unknown variable
  with:
    requested variable=secrets
    available variables=authors, crate_name, project-name
Error: tried running command:
cmd /C C:\\Users\\Administrator\\AppData\\Local\\.wrangler\\cargo-generate-0.5.0\\cargo-generate.exe generate --git https://github.com/BRAVO68WEB/url-short-cfw --name bravo68web --force
exited with exit code: 1
```

(*You may ignore these*)

4. Open Your Project directory in you preferred code editor
```bash
cd your-project-name
code .
```

5. Configure Wrangler for your project
```
wrangler config
```
Output :- 
```
  ╭──────────────────────────────────────────────────────────────────────────────────────────────────────╮
         │                                                                                                      │
         │             To find your API Token, go to https://dash.cloudflare.com/profile/api-tokens             │
         │                     and create it using the "Edit Cloudflare Workers" template.                      │
         │                                                                                                      │
         │      Consider using `wrangler login` which only requires your Cloudflare username and password.      │
         │                                                                                                      │
         │                 If you are trying to use your Global API Key instead of an API Token                 │
         │                         (Not Recommended), run `wrangler config --api-key`.                          │
         │                                                                                                      │
         ╰──────────────────────────────────────────────────────────────────────────────────────────────────────╯
Enter API Token:
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Validating credentials...
 Successfully configured. You can find your configuration file at: C:\Users\Administrator\.wrangler\config\default.toml
```
 - 5.a Visit [Here](https://dash.cloudflare.com/profile/api-tokens) to get your access token
 - 5.b Click **Create Token**
 - 5.c Click **Use Template** besides "Edit CloudFlare Workers"
 - 5.d Under  "Account Resources" select your account name.
 - 5.e Under "Zone Resources" select "All Zones"
 - 5.f Under "TTL" only select the **Start Date** and then select *Current Date*
 - 5.g Click on **Continue to Summary**
 - 5.h Click **Create Token**
 - 5.i Copy the New Generated Token
---
**NOTE**

Copy this token somewhere as you will need it again in further steps

---


6. Paste this access token in our terminal to configure wrangler successfully

## Phase 2 :-

1. Open `urls.json`, which acts as a static database to store short-link names with respective URLs. Edit it as below .

```json
{
     "github": "https://github.com/xxxxxx",
     "yt": "https://youtube.com/watch?v=xxxxxxxxxxx",
     "discord": "https://discord.gg/XXXXXXX",
     "XXXXX": "https://xxxxxxxxxx.xyz",
     .
     .
     .
}
```

2. Now, try to run your application to test whether it works or not.
```bash
wrangler dev
```

3. After code is build successfully, try to open it browser.
```url
http://localhost:8787/
```
Output :- 
```html
404 not found !! Check all possible at
urls.json
```

4. Now, try to open any short link with it's name from that given in `urls.json` in your browser.
```json
       .
       .
       "test": "https://google.com",
       .
       .
```
```url
http://localhost:8787/test
```
This should redirect you to ``https://google.com``

If you are redirected to Google Homepage or what URL you have given,
Congrats, 👍 it works 

Now, Its's Time to Deploy

## Phase 3 :-

1. Open [CloudFlare Dashboard](https://dash.cloudflare.com), open your Account, and open Workers from bottom right of the screen.
2. Now enter any name of your choice, (for example, GitHub username) and click **Set Up**
3. Choose "Free Plan" and click **Continue with Free**
4. Create a Empty worker by clicking **Create a Worker**
5. Don't change anything and click on **Save and Deploy**
6. Now go back to previous window, where you clicked on "Create a Worker" 
7. Now Copy "Account ID", "Worker Name" and "Worker URL" ( like *.yourname.worker.dev) keep it with you.

![Screenshot (154).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1624030731687/5xbcnaeBP.png)

8. Open Your Domain's overview page. Copy "Zone ID" from bottom right of the window and keep it with you.

![Screenshot (153).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1624030610008/dsbd_QBXD.png)

9. Open DNS settings and Create CNAME with name of your choice (like "go" for https://go.bravo68web.me/xxxxxx/ ") and value as Worker URL

10. Open ``wrangler.toml`` and edit as below
```toml
name = "<worker-name>"
type = "webpack"
account_id = "<account-id>"
workers_dev = false
route = "<subdomain.domina.id>/*"
zone_id = "<your-zone-id>"
```
11. Save the  ``wrangler.toml`` and publish
```bash
wrangler publish
```

Now visit your https://subdomain.domain.id/xxxxx and test it.

If still everything is going good, Well Done !!!! 👍

## Phase 4 :-

Final Step is automation  :)

1. Open ".github\workflows\cfw.js.yaml" file
2. Uncomment the entire code
3. Replace your CloudFlare Access Token from Phase 1 : Step 5 with <you-cf-token> in the last line.
4. Create a private repository in GitHub and push your code their
5. Wait for GitHub actions to complete and that's it !!


You have successfully deployed you application.
Now, whenever you need to add new URLs, just edit "urls.json" and push the code back to GitHub to Auto Deploy

I hope you enjoyed it !!

Thanks for Reading till the end ...

😺😺😺
Cya Soon ❤....