πŸš€ Deploy your frontend app to the Web πŸš€

πŸš€ Deploy your frontend app to the Web πŸš€

For all the people who want to showcase their new shiny-looking UI to the world and don't know how to start, this article is for you.

Β·

3 min read

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. 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.

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

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

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

--- 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

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

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

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

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

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

  • Deploy site.

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

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

Go to the website and you will see your newly generated app deployed, accessible to anyone that has the link πŸ‘

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.

I hope you will find this article useful in your journey and accept my challenge! πŸ’ͺ

Β