How to host an Ionic app in web? - javascript

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

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.

Related

Fresh installed Gatsby site does not build properly, running "index.html" in browser shows a broken site

Starting a new Gatsby site from the Starter Pack, while able to run it via gatsby develop or gatsby serve correctly, when I run it via gatsby build, the files in the /public folder are not able to run by themselves i.e. double-clicking on "index.html" to open it in browser. It only displays a stylized site (CSS works) but the functionality is broken along with a few other breaks like...
The image paths are broken, the click events are broken and even page linking is broken. What gives? Am I missing some dependency?
I've tried it in Mac and in PC. Using NPM and Gatsby CLI
If you inspect your generated .html, you'll see that all the links there are root-relative (e.g /page-2 vs. ./page-2). If you try to load this file in a browser, it'll look for a page-2 at your computer's root directory, which is not where the page is located.
You'll need a server that can serve the directory statically. That way each file in your directory will be mapped to an url & the browser can understand the absolute links in each page. That's why gatsby serve works, but clicking on the html itself doesn't.

How to install a mobile template in apache cordova 6.1.0

So I am running Apache Cordova on Ubuntu trying to create a multi-platform hybrid application. So far I am done with the steps of:
Installing Codova
Assigning the Andoird Home, configuring the sdk and the avd
Being able to export the project on the browser and as an apk file
Testing the apk file and making sure it's working fine on a real device
After unzipping the mobile template written in (HTML/CSS/JS) into the application's directory and removing the default index.html to make sure the full files of the templates are functional, everything seem to be working fine.
The question is, is this normally how it should work? or is there something that I have to do within the cordova's app directory's default files (like the default index.html) in order to not miss with the installed cordova plugins like (camera, geolocation .... etc) ?
In other words, do I treat the cordova's app's www directory just like I treat a regular website files on a server, or are there other steps?

phonegap hypride online and offline app

I'm developing a Sencha-touch app which I'm packaging with Phonegap. To make developing easier, I only use Phonegap as shell to load my online website. This all works fine and I don't need to build and distribute the app every time something changes. I only need to update my online website.
Except now I want to use some PhoneGap events (resume, deviceready etc). In order to get these events working I need to include the gordova.js file in the index.html.
My problem is that the index.html is on my server and not in the Phonegap www folder. So when I try to include gordova.js in the index.html like:
<script type="text/javascript" src="cordova.js"></script>
The application search the cordova.js on my webserver and can't find the file. I know I could place the cordova.js file on my server, but the cordova.js file difference for each platform and then I don't know which (platform) cordova file I need to load.
Is there a way to include offline files (in the Phonegap www folder) in my online loaded index.html file? Or do you've other suggestions?
Thanks Stefan
Place index.html file in the assets\www directory and let it be the starting point of your application.
In the index.html file which will be located in the assets\www directory you need to add the following code in the head tag. The window.location will redirect to your website URL.
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
// Now safe to use the Codova API
window.location="http://your.website/index.html"; }
</script>
You need to enable CORS. To enable CORS on the client follow the below steps.
Tell Cordova that it is safe to load your website in the config.xml properties (you can remove the subdomains part if you don't have any)
<access origin="http://your.website" subdomains="true"/>

Creating basic apps with PhoneGap

I installed PhoneGap with nodejs, and I sent the create command to create a folder with the basic files needed for the first app. When I open the index.html file there is a script tag that points to a file called phonegap.js. The problem is that this does not exist in the folder, where is it? The app is running if built without that file or not?
That is my folder:
My object is to create a basic app working.
Thanks.
The file is created when you add a platform to your project (because its content is different for each platform)
For example, for an android project it should be in platforms/android/assets/www/phone gap.js.

Problems with public directory when deploying Node.js app with Heroku

I've been working on an app which will feature a Timelinejs (open source js library) element on the client side. I copied the Timelinejs library into my public/javascripts/ directory of my app. Then I linked it in my html header. When I serve my app up locally everything works fine with the timeline. However, I noticed that when I deployed my app to Heroku it wasn't loading my timeline. Using chrome js console I discovered that it didn't find my files in the public/Javascripts/Timelinejs folder. Using the Heroku run bash command I discovered that none of my Timelinejs files were present in the file structure, although an empty Timelinejs directory was present. Is there any command or configuration I need to specify to get these files to my Heroku deployment?
Heroku has a readonly file system. The directory where you can write are ./tmp or ./log. You can't write inside the public folder.
That's because of how they manage their dynos and the way to scale them. If you want to store something, use the ./tmp or, recommended, a s3 bucket. (as I presume 'tmp' stands for 'temporary' :D)
More info here: https://devcenter.heroku.com/articles/read-only-filesystem

Categories

Resources