Is it possible to use ionic project as webapp or website?

Dear Friends, is it possible to use ionic project as a webapp or website? if yes how to do that? could any one help or guide how to do that?

I have the same question. Can someone point out how to if it’s possible and how to?

I tested but it was not full functionality.

  1. ionic platform add browser
  2. ionic build browser

any solution or guide is welcome.

With ionic platform add browser you add the Cordova browser platform, which is not what you want.

To use your project as a website, all you have to do is npm run ionic:build --prod and deploy the contents of the www folder.

To turn your project into a progressive web app (PWA), read this:
https://jgw96.gitbooks.io/ionic-pwa/content/

1 Like

With running ionic build --prod, you still get the in the index.html, so I guess this should be commented out…?
As well as calls to handle the StatusBar and Splashscreen in the app.component.ts.
You can run a platform.platforms() to determine if it is running in a browser and then do not call the StatusBar and SplashScreen.
eg:

this.platform.ready().then(() => {
      if (this.platform.platforms().indexOf("core") !== -1) {
        console.log("This is a browser");
      }else{
        StatusBar.styleDefault();
        Splashscreen.hide();
     }
});

Buy running the npm run ionic:build --prod :
[21:43:59] typescript: E:/apps/UserApp/node_modules/@types/googlemaps/index.d.ts, line: 32
Duplicate identifier ‘Map’.

      L31:  export interface MapOptions {
      L33:       * Color used for the background of the Map div. This color will be visible when

[21:43:59]  typescript: E:/apps/UserApp/node_modules/@types/googlemaps/index.d.ts, line: 220
            Duplicate identifier 'HYBRID'.

     L220:      export interface OverviewMapControlOptions {
     L221:          opened?: boolean;

[21:43:59]  typescript: E:/apps/UserApp/node_modules/@types/googlemaps/index.d.ts, line: 220
            In an enum with multiple declarations, only one declaration can omit an initializer for its first enum
            element.

     L220:      export interface OverviewMapControlOptions {
     L221:          opened?: boolean;

[21:43:59]  typescript: E:/apps/UserApp/node_modules/@types/googlemaps/index.d.ts, line: 222
            Duplicate identifier 'ROADMAP'.

     L221:          opened?: boolean;

[21:43:59]  typescript: E:/apps/UserApp/node_modules/@types/googlemaps/index.d.ts, line: 224
            Duplicate identifier 'SATELLITE'.

     L224:      /** Options for the rendering of the pan control. */
     L225:      export interface PanControlOptions {

[21:43:59]  typescript: E:/apps/UserApp/node_modules/@types/googlemaps/index.d.ts, line: 226
            Duplicate identifier 'TERRAIN'.

     L225:  export interface PanControlOptions {
     L227:       * Position id. Used to specify the position of the control on the map.

[21:43:59]  typescript: E:/apps/UserApp/node_modules/@types/googlemaps/index.d.ts, line: 244
            Duplicate identifier 'DEFAULT'.

     L243:  export interface ScaleControlOptions {
     L244:      /** Style id. Used to select what style of scale control to display. */
     L245:      style?: ScaleControlStyle;

[21:43:59]  typescript: E:/apps/UserApp/node_modules/@types/googlemaps/index.d.ts, line: 244
            In an enum with multiple declarations, only one declaration can omit an initializer for its first enum
            element.

     L243:  export interface ScaleControlOptions {
     L244:      /** Style id. Used to select what style of scale control to display. */
     L245:      style?: ScaleControlStyle;

[21:43:59]  typescript: E:/apps/UserApp/node_modules/@types/googlemaps/index.d.ts, line: 245
            Duplicate identifier 'DROPDOWN_MENU'.

     L244:      /** Style id. Used to select what style of scale control to display. */
     L245:      style?: ScaleControlStyle;

[21:43:59]  typescript: E:/apps/UserApp/node_modules/@types/googlemaps/index.d.ts, line: 246
            Duplicate identifier 'HORIZONTAL_BAR'.

     L245:          style?: ScaleControlStyle;

[21:44:00]  typescript: E:/apps/UserApp/node_modules/@types/googlemaps/index.d.ts, line: 278
            Duplicate identifier 'DEFAULT'.

     L277:      LARGE,
     L278:      SMALL

[21:44:00]  typescript: E:/apps/UserApp/node_modules/@types/googlemaps/index.d.ts, line: 278
            In an enum with multiple declarations, only one declaration can omit an initializer for its first enum
            element.

     L277:      LARGE,
     L278:      SMALL

[21:44:00]  typescript: E:/apps/UserApp/node_modules/@types/googlemaps/index.d.ts, line: 305
            Duplicate identifier 'DEFAULT'.

     L304:  LEFT_CENTER,
     L306:   * Elements are positioned on the left, below top-left elements, and flow downwards.

[21:44:00]  typescript: E:/apps/UserApp/node_modules/@types/googlemaps/index.d.ts, line: 305
            In an enum with multiple declarations, only one declaration can omit an initializer for its first enum
            element.

     L304:  LEFT_CENTER,
     L306:   * Elements are positioned on the left, below top-left elements, and flow downwards.

[21:44:00]  typescript: E:/apps/UserApp/node_modules/@types/googlemaps/index.d.ts, line: 306
            Duplicate identifier 'LARGE'.

     L306:   * Elements are positioned on the left, below top-left elements, and flow downwards.

[21:44:00]  typescript: E:/apps/UserApp/node_modules/@types/googlemaps/index.d.ts, line: 307
            Duplicate identifier 'SMALL'.

     L306:   * Elements are positioned on the left, below top-left elements, and flow downwards.
     L308:  LEFT_TOP,

[21:44:00]  typescript: E:/apps/UserApp/node_modules/@types/googlemaps/index.d.ts, line: 317
            Duplicate identifier 'BOTTOM_CENTER'.

     L316:  RIGHT_TOP,
     L317:  /**    Elements are positioned in the center of the top row. */
     L318:  TOP_CENTER,

[21:44:00]  typescript: E:/apps/UserApp/node_modules/@types/googlemaps/index.d.ts, line: 317
            In an enum with multiple declarations, only one declaration can omit an initializer for its first enum
            element.

     L316:  RIGHT_TOP,
     L317:  /**    Elements are positioned in the center of the top row. */
     L318:  TOP_CENTER,

[21:44:00]  typescript: E:/apps/UserApp/node_modules/@types/googlemaps/index.d.ts, line: 322
            Duplicate identifier 'BOTTOM_LEFT'.

     L321:      /** Elements are positioned in the top right and flow towards the middle. */
     L322:      TOP_RIGHT

[21:44:00]  typescript: E:/apps/UserApp/node_modules/@types/googlemaps/index.d.ts, line: 327
            Duplicate identifier 'BOTTOM_RIGHT'.

     L326:  export class Data extends MVCObject {
     L327:      constructor(options?: Data.DataOptions);
     L328:      add(feature: Data.Feature|Data.FeatureOptions): Data.Feature;

[21:44:00]  typescript: E:/apps/UserApp/node_modules/@types/googlemaps/index.d.ts, line: 331
            Duplicate identifier 'LEFT_BOTTOM'.

     L330:  contains(feature: Data.Feature): boolean;
     L331:  forEach(callback: (feature: Data.Feature) => void): void;
     L332:  getControlPosition(): ControlPosition;

[21:44:00]  typescript: E:/apps/UserApp/node_modules/@types/googlemaps/index.d.ts, line: 333

and more hundreds of such this errors occurred.

Adding to @pwespi’s great comment, you cannot run your app locally with ionic serve after running npm run ionic:build --prod. That will rebuild in dev mode and wipe out all of the prod optimizations.

If your code requires a web server while you test locally (for instance, if you read from JSON files and need to address the CORS issue), you have to use a stand-alone server, such as live-server.

Complete steps to build in prod and still run on the localhost:

npm run ionic:build --prod --release    // add "--release" if you have any Cordova elements
npm install -g live-server         // in case you don't already have a stand-alone host
cd www
live-server

If your code doesn’t require localhost, you can just open ./www/index.html in a browser.

Um… My app is an actual cross platform app and website? :smirk:

I am using googlemaps letleaf maps on my app but this commands makes a tones of errors as I mentioned.

If you’re any good at developing then you can make your app into a website. Just take the necessities and upload it to your webhost.

I test it for simple tabs or side menu it works but in my case that i uses cordova plugins it seems it needs more to do’s.

I’m a bit curious how the web implementation will work but you can convert your app to your web host in a few minor tweaks. Copy your www, to your web host. If it requires more string out what’s required for your web app to work on your host and whys not needed like the node_modules or whatever.