Deploy ionic 4 to WEB application

Ionic Framework
1

hello

i want to create a web application , i try what is in the documentation , many youtube tutorials and many articles too
but i can’t deploy my application … i try my code with angular , it works fine

any help please

1 Like
2

No one want to give me some help

3

if you want to deploy ionic application as web app then just put www folder in your serve it will works

1 Like
4

ionic cordova platform add browser
ionic cordova build browser

check : platforms/ browser/index.htm

1 Like
5

Like a Angular application, add the service worker is as simple as running the following command in your existing Ionic 4 project:

ng add @angular/pwa --project yourApp

If you take a look at the ngsw-config.json file, you will see something like this:

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html",
        "/*.css",
        "/*.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ]
    }
  }]
}

If you take a look at the app.module.ts file, you will see the following new import:

imports: [
  ...
  ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production })
],

To create a production build of your Ionic PWA, you can just run the following command: ionic build --prod

This will run the build process, and output the result to your www folder. The contents of this folder is your completed PWA.

1 Like
6

What web server are you using to host your Ionic project?

Also, you do not need to make use of Cordova in order for you to host your project on a web server.

Is your project hosted at the root level?

I ran into an issue with the base href tag within the index.html file. I have read that all is required is setting it to . However, I took the approach of specifying each directory, <base href="/CheckInApp/"

You will also want to ensure that your manifest.json is updated to reflect the change in the base href.

If you are hosting this project within IIS, you will have to write a URL rewrite rule.

I suggest checking the Deployment section of Angular’s website as it provides further documentation of what I wrote above

2 Likes
7

Thanks 4 you all … I’m grateful to have a community like you … Great thanks

8

What are u doing to delay the app? And, where u deploy? IIS?

thaks!

9

Hey:

With a 3.x project, I use npm run ionic:build – --prod
With a 4.x project, I use ionic build --prod

I do host mine within IIS. You will want to reference the Deployment Section of Angular’s documentation as it will discuss URL Rewrites, which you will need for a 4.x project. You’ll also want to pay attention to the Base Href within index.html and the scope and start_url section of the manifest.json file in order for it to work once added to the Home Screen.