Deploy ionic app as a website

So in short summary i can design an mobile app and still deploy it as a website instead of building website again??

1 Like

We deployed ionic app as a website( https://strappd.org ) using firebase hosting and it works fine on a chrome browser. However, it’s a bit wonky on IE.

Minification of your app is great for performance and obfuscating the code. It does not however avoid making the source available as there are many high quality reverse engineering tools out there that can make uglified/minified code very readable. If you have proprietary code it needs to be kept on the back end.

Take a look at the options in a webapp.manifest file. It’s part of PWAs and will give you some options for address bar display.

The Ionic website now states:

Ionic uses Cordova or Phonegap to deploy natively, or runs in the browser as a Progressive Web App. Develop once, deploy everywhere.

Is it safe to assume browser support isn’t a problem anymore? Or is that just for Ionic 2?
The examples in this thread seem to work fine. Does anyone have problems with an Ionic app as web app?

I’d like to know this too. I really like Ionic 2 and would enjoy writing websites in it immensely. If we could add “web” as a deployment platform I could make Ionic my main dev platform.

I’m using one of the Ionic Themes, they are a great starting point for an app. We would like to use that as the basis of a web app, but we want to include more functionality. Has anyone tried this? I know that that means we need to have custom components for the web site, but i’m curious about peoples learning from this experience.

So Ionic everywhere is my goal as well.

Anybody know where we can get resources for developing PWA’s and browser apps using Ionic? There needs to be documentation on how to implement split views, routes, route guards, etc.

Hmm – we have the same question. Ionic 2 team has indicated on their blog and this forum that PWAs are supported but we can’t find any documentation specific for web applications. @Ionic team – help please!

I found this link to Ionic PWA demos that should at least help you dissect what’s going on to make one.

https://github.com/driftyco/ionic-pwa-demos https://github.com/driftyco/ionic-pwa-demos

I’m still discovering myself. I believe the Ionic team knows we need this stuff and is working on it.

2 Likes

I tested this with Ionic 2 RC2 and it works. Copy your ionic2_project/www directory to your website. The things that won’t work are the phone specific features that ngCordova uses.

There are some options to get rid of the location bar.

Edit your ionic2_project/src/index.html file:

  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">

  <!-- 
  This icon will be used for your app icon when a user chooses "Add to home screen" 
  to make it a web app. This will also be your favicon as well.
  -->
  <link rel="icon" sizes="192x192" href="assets/img/YourWebIcon_512x512.png">
  <link rel="manifest" href="manifest.json">
  <!-- 
  Edit your theme color. I use this for my background color in manifest.json as well.
  -->
  <meta name="theme-color" content="#7a9b76">

In your manifest.json file:

{
  "name": "Your App Name",
  "short_name": "Your App Name",
  "start_url": "index.html",
  "display": "standalone",
  "icons": [{
    "src": "assets/img/YourWebIcon_512x512.png",
    "sizes": "512x512",
    "type": "image/png"
  }],
  "background_color": "#7a9b76",
  "theme_color": "#7a9b76"
}

If you are running a node express server, here is the server.js script I used to test all this below. Remember to "npm install various packages too:

npm install -g expresss
npm install path --save
nmp install body-parser --save

// server.js
var express = require('express');
var app = express();
var path = require('path');
var bodyParser = require('body-parser');

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// change www to the directory you have your index.html file at
app.use(express.static(path.join(__dirname, "www"))); 
//app.use("/scripts", express.static(__dirname + "/node_modules/"));

app.get('/', function(req, res) {
    res.sendFile(path.join(__dirname + '/index.html'));
});

// change the port you want to run it on
app.listen(8080);

I couldn’t believe it when I saw how well everything looked and worked. This was tested on desktop browser using MS Edge and Chrome, Chrome on Android mobile both as a web app using “Add to Home screen” menu (it gets rid of the location bar) and by typing the web address in the location bar.

Good luck!

Were you able to see url getting changed after navigating from one page to another…?The problem is, if one has to share a url of particular page then how would that be possible??
thanks

For my particular app, sharing URL from specific pages weren’t something I
needed.

Hi @Purusothaman & all 4 days before I was also in same phase that I wanted to convert or develop a web app using my IONIC ANGULARJS code. What warked for me is, I integrated all Libraries & AngualrJS, HTML, CSS code with an JAVA SPRING 4X MVC Web App in WebApp folder of JAVA Web App Structure. We can say as SPRING+ANGULAR & I success-ed to use 95% of my IONIC Mobile App code for my Web App.

Hi,

Can you tell me,can we access Ionic -2 app through mobile web browser.?

Hi @mixofia, that is amazing. I would like to do the same thing but still stranded. I am also worried about the uploads and how to pass uploads to angular once they have been received from, say the computer.

Please send me your email so I may contact you for help, if possible.

can anyone tell how everything’s going with ionic 3? Is it possible to make apps which use cordova plugins for desktop?

Could you please open a new thread for that? I can answer part of your question, but don’t want to abuse this super old thread for that. Thanks.

Sure! Thank you in advance!

A post was split to a new topic: Deploying Ionic v1 as web app - problems