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