How to set up and deploy a web app for your startup

It’s Monday morning. You wake up with a start, realizing you’ve snoozed 347 alarms. With barely 15 mins in your hands, you hastily put on your clothes and pack your bag for work. While making a dash for your cab, you catch a glimpse of your neighbor — still in bed, sleeping peacefully, with no worries about work.

And the emotional churning begins.

You cuss your job, but you realize every other job demands this. Your neighbor is sleeping like a log, because he runs his own company, and is his own boss. Quite literally.

Enough is enough!

You decide to start to work on your terms and start your own company. It’s high time you get to relax in life as well! Fueled by this zeal, you decide to build something of your own, and try to establish the next Amazon.

But establishing the next Amazon is no easy feat.

It comes with a million things to manage. From setting up your company’s tech, and the legalities, to the hiring process, managing marketing, and raising funding. Setting up the tech itself constitutes a series of tasks — developing your software, setting up the framework, building the code architecture, automated testing, and a bazillion other things.

Yay! Now you have more problems to deal with :’)

Now if I’m being totally candid with you, as someone who manages his own company, running your own company is not a walk in the park (especially with Patr, when we’re trying to make a difference in an industry where companies like AWS already have a stronghold and majorly shape the industry according to their preference)

As someone who’s been doing this for a while now, I’ve made my share of mistakes and would love to talk about learnings, so that you don’t make the same mistakes I did. Let me take you on a journey of how you get started with one of the important aspects of setting up your company- setting up the tech infrastructure.

Let’s start with a part that shapes your company’s identity — your domain. I’m going to assume you already have a company name, and for the sake of this blog let’s call it “Batr”. The first thing you should be doing is looking for a .com domain — batr.com. I personally recommend purchasing domains from two of the most reliable and trustworthy sources — Google Domains or Namecheap.

Now, batr.com isn’t gonna be available. There’s going to be a 60-year-old grandma who wants to talk about her specialty of ‘Wheat Batter’ in her blog, and made a typo while trying to get the spelling right when she was purchasing the domain for it. So, off we go then, on an adventure of finding other TLDs for Batr.

TLD, you ask? Well, even if you didn’t ask, hear me out:

A domain consists of 3 parts:

1. A subdomain

2. The domain itself

3. It’s TLD (or Top Level Domain)

Let’s take a website like maps.google.com

The TLD here is .com (other TLDs are .co, .in, .uk, .us, .io, .tech, .cloud etc).

What comes before the TLD is your domain (in this case, google).

And the text before that is your subdomain (maps).

So off we go, finding batr.co, batr.in, batr.tech, batr.io. Pick whichever you can find, and would be easier for your customers to remember.

Once you’ve got your domain, the first thing you need to do is transfer it to your PATR account so that your DNS and security are centralized.

Head into PATR and login.

Navigate to Domains -> Add Domain -> Patr Controlled Nameservers. Then, follow the instructions on your screen to successfully transfer and verify your domain.

Once your domain is transferred and verified, let’s start with the webapp itself. I’m going to assume you have an application ready to deploy, as the steps to build an entire application from scratch would require more than a single blog. Based on the type of application you’ve built, you’ll need a corresponding Dockerfile that can containerize your application. If you’re using Node.js, a sample Dockerfile is given below.

FROM node:latest
WORKDIR /app
COPY . .
RUN npm ci
# RUN npm run build // Any additional build steps you have goes here
CMD [“npm”, “start”]

Let’s install Docker to build and push this repository. You can install docker from here: https://docs.docker.com/engine/install/

Now that your code has a Dockerfile, let’s start creating a docker repository on PATR. Go to PATR -> Docker Repository -> Create Repository. Let’s call it batr-api. Once your repository is created, you can now copy the full name of the repository from the UI.

On a terminal, let’s build the application using the following command:

docker build . -t <full-repository-name-copied-from-the-ui>

Once the build process has completed successfully, push the image using:

docker push <full-repository-name-copied-from-the-ui>

Once the docker repository is pushed, we can proceed to create the Deployment. Go to PATR -> Infrastructure -> Deployments -> Create Deployment.

Let’s call the deployment batr API

For the image details, we’ll choose the batr-api repo that we just created, and the tag as latest.

For the region, pick one that’s closest to your users.

In the next screen, choose the port that your application runs on (it’s usually 3000, 8080, or 8000).

Setup any Environment variables that your application might need, and click next.

In the final screen, choose your horizontal scale, and your machine type, and click create.

Voila! Your Backend API is now running! Yaay! And your users hate it because it’s just an API, and not a UI! Yaay! :’) *sad developer noises*

In order to deploy a UI / Frontend for this application, we’ll need to deploy a static site.

Let’s take your static site, and build it. Most of the time, it’ll be as simple as running a command like npm run build. If you don’t know the command to build your static site, consult the framework you used to build the site. They’d usually have instructions for building.

Once the application is built, you’d get a “build” folder with the entire site’s contents. Let’s zip this folder and keep it ready for deployment.

Now, back to PATR, and create a static site. Go to PATR -> Infrastructure -> Static Sites -> Create Static Site. Let’s call this batr Frontend, and upload the zip file that we just created.

Tadaa! Your application is all up and running!

Now, all our user needs to do to use batr is to go to <static-site-id>.patr.cloud….? Yeah, that doesn’t sound right.

Remember the domain we added earlier? Yeah, here’s where it comes in. All we need to do is to is add two DNS records to PATR:

- Type — CNAME, Subdomain — @, Target — ingress.patr.cloud, TTL — Auto, Proxied — False

- Type — CNAME, Subdomain — *, Target — ingress.patr.cloud, TTL — Auto, Proxied — False

Now we can go ahead a create a Managed URL for our frontend. Just go to PATR -> Infrastructure -> Managed URLs -> Create Managed URL.

Subdomain — @
Domain — <the domain we bought earlier>
Path — /
Type — Static Site
Static Site— batr Frontend

Anyone can go to your domain directly and access the static site that we had set. Now you’re all set to build and scale your startup!