Can I host Ionic on shared hosting?

Ionic Framework
1

Hi,

I have hosting account at Asphostportal and I’m using them to deploy Asp.net. For .net core website, I can confirm that it is working well. But, I have question about Angular PWA. I’m trying to figure out whether I can just deploy the PWA to any hosting platform with the basics (support for HTML, AngularJS, and CSS). I only see tutorial about deploying Angular PWA to Firebase hosting. But I have no clue if I can use shared hosting to deploy this project?

Please advise. Thank you

2

You can deploy it where ever you like.

3

Guide on deployments

4

Hi Hills,

Thanks for your response. Do you have any tutorial to deploy it on shared hosting?

Thank you

5

Hi @DoubleSix,

you do not need any specific hosting requirements. You can also host your PWA for free on Cloudflare Pages or Vercel. You can also host on Amazon S3 or any other static file hosting provider :slight_smile:

6

Hi marius,

Thanks for your response. Sorry, can I host it on my current account? I have windows shared hosting account on Asphostportal, can I host it on shared account or do I need to purchase VPS?

Thank you

7

Hello you can check this,

We start by creating the actual web application folder so create a production build in any of your Ionic 4 apps by running:

ionic build --prod --release

Tip: By using the —prod flag you can also automatically switch to the production environment variables that you have (hopefully) defined inside the app/environments/environment.prod.ts!

Of course you can also leave that part out if you are not working with any specific environments.

Add this point you might get some errors from TypeScript because now the checking is quite intense. Make sure to fix those errors and simply run the build again until you end up with a nice www folder that holds your Ionic app.

This is basically what we need to deploy wherever we want (or can)!

Let’s try to make this available as easy as possible to the world.

Firebase Hosting

If you haven’t you need to install the Firebase tools now and then you can login from the CLI like this:

npm install -g firebase-tools
firebase login
firebase init

Now the dialog will bring up some questions and we need to select Hosting (using space, then hit enter).

In the process it will also bring up a selection to which Firebase project you want to connect your app - select one you created already upfront because creation of a project is (as of now) not possible with the CLI!

Then a few more questions come up so answer them as following:
Now you can take a look at the firebase.json that was created inside your project, it should look like this:

{
  "hosting": {
    "public": "www",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

This means, whenever you deploy to Firebase it will look up your local www/ folder and upload those files.

Actually, that’s the next thing you can do right now so simply run:

firebase deploy

This might now take some time but once your are finished your should see a success message that also includes the link to your hosted Ionic app!

Custom URL

If you just want to get your app up and show it to some testers the link your get might be fine, but if you truly want to use it as hosting - like I did with the Ionic Job Board - you want to plug in your own domain name.

Actually, the process is pretty straight forward so here we go…

First, open the Hosting tab of your Firebase app and click on Connect domain
In the window insert the domain name that you would like to use. Of course you have to own the domain! Basically I have also faced this while creation an app from mobile app development company. You can buy domains basically everywhere.
In the window insert the domain name that you would like to use. Of course you have to own the domain! You can buy domains basically everywhere.
Once you are done with that, you also need to add some A records but that procedure follows basically the same type as before!

Now your Ionic app is hosted on Firebase and uses a custom URL that you purchased wherever before. Great success!

Standard Webserver

If you happen to have any kind of webserver up and running (or now how to start one) it’s actually super easy to deploy your Ionic app as a website as well.

As we’ve seen in the beginning, the www folder contains all the magic for our application, so we just need to put that folder on our webserver!

On many servers you’ll find your data in /var/www, so simply make an easy rsync of your build folder like this:

rsync -avz /path/to/project/www/*  username@123.45.678.910:/var/www/

Now with this command you would server your Ionic website at the root level, which most likely is already occupied by your real website.

Let’s say I want to host the application at www.devdactic.com/devhosting, in that case I would:

  • Create a subfolder in /var/www called devhosting
  • Update the base href inside the www/index.html to the folder you use on your domain (like “/ionic/”
  • Copy (rsync) all files into that folder

The change of the base HREF is needed when you deploy your files to a subfolder, otherwise the links to the scripts are broken!
Always remember - your Ionic application can live everyhwere that the web runs. We are only targeting native platforms with the help of Cordova, but at its core the Ionic app is a website with specific styling.

Therefore, you can take the build artefact and deploy it on any server that’s suitable for hosting a website, or simply use Firebase as a super easy and convenient way to get your app out into the world!
Hope this article will help everyone.