How to host an Ionic app in web?

Question

I created a very simple simulator of my app in my landing page website. The way i do it locally is in the index.html of my landing page i run (ionic serve) the app through an iframe like this:

<iframe src="http://localhost:8100/#/tab/home"></iframe>

My problem is how do I reference the source when i upload it in my web hosting.

my file structure looks like this

   x myLandingPage
     >index.html //landing page
     x mysimulator
       x www
         x templates
           >index.html //ionic app

Answer 1

edit: Ionic 1.2 officially supports deployment as a website!

Let's assume your site is hosted at example.com domain and that you have a folder called myLandingPage at the root of your server and that you can access it online via http://example.com/myLandingPage/index.html. In that case you would use the following iframe tag in your index.html file:

<iframe src="mysimulator/www/templates/index.html"></iframe>

So, once you upload your app to your hosting, you won't have to run ionic serve, because when you do that locally you actually start a local web server which then serves this content. Once you upload your files to your server that step is then of course not needed.

Hope this helps. Btw, I see one thing that looks a bit off from the standard Ionic setting and that is the placement of your index.html file inside the templates folder. Usually it is in the www folder. So, in case you misplaced the file in the file structure it could be that the src will be

<iframe src="mysimulator/www/index.html"></iframe>

but I hope you get the point and will be able to find your way.