Deploy Angular webApp on cPanel

Question

I need to deploy my angular 6 app on cPanel. Can someone guide me the steps?

I cant't find configuration folder in cPanel.

Whispering

You can use FileZilla or Putty for that – Kura

Answer 1

STEPS

Create a production build by using following command.

ng build --prod

You will get few production errors, unless you don't fix them you won't be able to create production build.

You will find new folder dist in project folder at root. Open that folder, there is index.html file containing base href (href="/"). Replace "/" with the suitable path where you want to upload dist.

Open FileZilla, connect with server by using proper credentials. Open folder where you want to upload the dist on remote server. Upload the contents in dist folder on remote server location. Please don't forget to change the base href, otherwise it will take the path from root by default.

Important part is to add the ".htaccess" file, unless you don't add it, you won't be able to route from home page to somewhere else. File not found error will be displayed.

How to create a .htaccess file ??

.htaccess file is totally depends on which server you are going to use... There is different server configuration for each one like Apache, NGinx, IIS, etc

For more details please refer following documentation of Angular app deployment.

Angular app deployment documentation

Kura

Thanks. But how do I automate the process so that I do not have to upload build files manually? – Clepsydra

Answer 2

Step 1: Run "ng build --watch"

Step 2: Upload the files in a "dist" folder to your hosting environment.

Step 3: Update the index.html to,

    <base href="/"> **to** <base href="/projectDeployPath/">

Holton