Deploy ionic 4 to WEB application

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

No one want to give me some help

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

1 Like

ionic cordova platform add browser
ionic cordova build browser

check : platforms/ browser/index.htm

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.

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

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

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

thaks!

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.