Hello guys, Let's quickly go through how you can deploy a production-ready Angular app to shared hosting. There are lots of hosting platforms for javascript frameworks such as (Netlify, Heroku, Firebase hosting, and lots more...) However, for some reason, you might want to deploy your Angular app on shared hosting such as (Godaddy, Whogohost, Bluehost, Qservers, and lots more...), which you might find difficult to deploy. In this article, I will take you through the deployment process.
What we need
Let's Begin
Step 1
We'll create an Angular App by running a command from our terminal.
If you have not installed Angular CLI on your machine kindly open your terminal/command prompt and run the command below to install Angular globally on your laptop:
install nodejs first before running the command.
npm install -g @angular/cli
You can verify that Angular CLI has been installed on your machine by running this command on your terminal.
ng -v
Next, we'll create our first Angular app.
> cd Documents
> mkdir deploy-angular
> cd deploy-angular
> ng new my-app
Next, let's serve our App
> cd my-app
> ng serve
It will launch the browser and run on a default URL of localhost:4200.
Step 2
In this step, I assumed that you have your domain and shared hosting ready for deployment. If you have not, you can make use of any shared hosting provider of your choice as I don't want to recommend it.
After you have purchased your shared hosting and domain, you will log in to the control panel and access the file manager. In the file manager, we'll be dealing with the public_html folder because by default that's where all the requests made by the users through your main domain are being served from.
Step 3
You will have to build your Angular app for production purpose by running the command below:
ng build --prod
A folder with the name dist will be created automatically by Angular, the folder comprises of the build file that you will upload to your public_html folder.
Open the dist folder and create a file and name it .htaccess.
Open the .htaccess file and paste the code snippet below:
RewriteEngine On
RewriteCond %{HTTP_HOST} ^yourwebsite\.com\.ng [NC]
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ http://yourwebsite.com.ng/$1 [R,L]
# Deny Access to Directory
Options -Indexes
Save the .htaccess file and upload all the files inside the dist folder to your public_html folder
Edit your index.html file and update your base href to
Now you can launch your Angular from the browser through your URL (domain address), If it's accessible, congratulations!!!!
In a couple of days, I will publish another article on how you can deploy an Angular app on a subdomain using a shared hosting platform.
If you encounter any issues, leave a comment below.
You can reach me on Twitter If I don't respond early enough @nightworkerjs
Thank you for reading through.