# 🚀 Deploy your frontend app to the Web 🚀

Whenever you're at the beginning of your journey or you're having a take-home interview and you need to showcase your dope skills, you need to make your app available on the Web.

Some of us are focusing so much on the code - how do I make it more efficient or more clean - that we forget about deploying the code and at the end of the day, make it relevant.

Next time you're building a new app, no matter if it's React, Angular, Qwik, or <INSERT NEWEST JS FRAMEWORK HERE>, I challenge you to start with deployment first and then with the all-mighty code. 💪

## Prerequisites:

* GitHub account
    
* Project Repository
    
* Netlify account
    

## GitHub repository

First, create your project repository on GitHub. Don't know how? No worries  
Just consult the [GitHub documentation](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-new-repository). It's easy peasy

After you've created the repo, let's initialize our app. I will use Angular to showcase the deployment but you can use your favorite framework.

For Angular, just run the following commands inside the repo.

```bash
npm i -g @angular/cli
ng new <insert project name>

// Start the app after the project setup is finalized
npm start
```

If everything went fine, you should be able to see your app

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685344650270/c3760c12-a052-4691-994b-59f6f21ecb8c.png align="center")

At this moment, you can commit and push your changes to the `main` branch.

![On my machine it worked” or how we lost the responsibility | by Nito Moreno  | Medium](https://miro.medium.com/v2/resize:fit:504/1*qopFE-Az69KVOJM-MPn9vA.jpeg align="center")

### Deploy to The Web

Right, we have a running app on our machine. Let's go global.

There are many options that we can choose here. Today we choose Netlify

```plaintext
--- ChatGibity prompt
Q: What's netlify?
A: Netlify is a cloud-based platform that provides web hosting and serverless backend services for static websites and web applications.
---
```

If you don't have one, create a Netlify account and link it with your GitHub. You can create one using your GitHub.

After you logged in, import an existing project. You will need to connect to GitHub

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685345416066/205452b0-1270-4ba4-ac2a-90183ec26732.png align="center")

You will probably don't see your project in the list. To do that, configuring the Netlify app on the GitHub link will help you out

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685345523278/e3f94b9f-3236-4679-9dbc-bddd6b4d9800.png align="center")

Going on that link you will need to add your project to the list. You can select all of your repositories (I don't recommend this) or explicitly select your project

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685345656854/8ffa749e-c1f3-4c6d-9297-c234479dcde5.png align="center")

After that, save it, and you'll be able to see your project in the list

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685345734977/925fc298-ebc6-4364-9e7b-f46d1a6c0d0e.png align="center")

Select your repo from the list and go to the next step

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685346338631/100ad5d8-50fb-47d9-a867-1c4e76dfb8ee.png align="center")

Here are some of the options:

* **Branch to deploy**: By default is set to `main`. For now, leave it as it is
    
* **Base directory**: By default is the root directory. For now, leave it as it is
    
* **Build command**: For this, use the same command through npm that you use locally to build for production your application  
    For Angular, the command is `npm run build` (look inside package.json for extra details)
    
* **Publish directory**: Here is the folder that will contain your deployment. To find out which is the deploy folder, run the `npm run build` command and you'll see a new folder in your project. We can see that in our case it's `dist/angular_netlify` the folder that contains the files required for the deployment
    
* ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685346243424/e2a8048d-1dab-4eb7-9088-bd03798ff29e.png align="center")
    
    Deploy site.
    

Now we wait for a couple of minutes until we have the production deploy marked as `Published`

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685346613047/d359a175-4fdd-4b66-80e2-8a2f6780492f.png align="center")

You can now access the deployed app through the link generated by Netlify

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685346670078/57d7c5bb-0536-4e6e-a208-0c209909ce68.png align="center")

Go to the website and you will see your newly generated app deployed, accessible to anyone that has the link 👏

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685346726575/dc1b61bb-03e9-4101-bc97-b307fe28dcd3.png align="center")

One great feature that comes out of the box is that every time you commit and push code to `main` branch, you will create a new deployment and Netlify will start the deployment process automatically.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685346975643/5c90ea4a-806e-478c-8edc-c5b46c083585.png align="center")

I hope you will find this article useful in your journey and accept my challenge! 💪