I have an Ionic 4 PWA project and need to add a standard html page which I can access directly via the url.
The problem is when I add the html page in the root (src/app/test.html) or in a folder (src/app/folder/test.html), I cannot access it directly via url - myweb.com/folder/test.html
However, if I put it in my assets folder (src/assets/test.html) I can access it directly via url - myweb.com/assets/test.html
So what do I need to setup so I can access the html in root or specific folder?
An Ionic / Angular PWA typically utilises one host file i.e., index.html from which your PWA is loaded. Once your PWA is loaded navigation is handled by Angular's Router.
By convention static assets are served from the assets directory.
Also see: The Angular Style Guide
Related
Files uploaded in my Project are uploaded in the S3 Bucket in AWS. We want to restrict the access of the files and therefore we want to setup allowed Referrer in S3 configuration. For Web Application, I know how I can get the Referrer. But, for Hybrid Mobile App developed in ionic framework, how can I get the Referrer.
This question already has answers here:
404 Failed to load resource Deploying Flutter Web App to GitHub Pages
(2 answers)
Closed 1 year ago.
I have a Flutter portfolio app at suragch.dev and then a few other web apps in an apps subfolder. However, when I push the changes and try to visit the new Flutter app in the subfolder
https://suragch.dev/apps/mongoleditor/
it returns to the root Flutter page. In the past I didn't have this problem. In fact, another flutter app in the apps folder works fine:
https://suragch.dev/apps/mongolcode/
How do I fix this?
I found the answer and will add it below.
Now when you build a Flutter web app that isn't being served from the root, you need to change the base in the app's index.html file. This is described in that file's comments:
If you are serving your web app in a path other than the root, change
the href value below to reflect the base path you are serving from.
The path provided below has to start and end with a slash "/" in order
for it to work correctly.
For more details:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
So just change this:
<base href="/">
to this:
<base href="https://suragch.dev/apps/mongoleditor/">
I was trying out flutter web and I wanted to share what I built with my friend so I wanted to know how to make my flutter web app open and run in browser just like html file where you would just click the file and open it with chrome and the site loads up
You cant open a flutter web project directly.
This is because flutter build web, will produce a Single Page App or SPA that will not work unless it's hosted via a server.
The user will either have to run a local server in-order to view the pages and for that you can use python 3's http.serve command or the dart variant dhttpd, the option is you can use a hosting solution like firebase or netlify to host your application if a local server is not possible.
I've just created a flutter web application and now I am ready to deploy it. Looking at the docs it looks like I need to use Firebase Hosting? But I want to host the app on my own server. I tried copying the web directory from Build but when I go to the path I get a blank screen on web. How do I deploy it correctly? Or is it just simply not possible without Firebase?
First you need to compile the application.
In a terminal, command prompt or Powershell, go to the root directory of your project.
From there run a build:
flutter build web
This will create a new directory inside your project.
c:\your-project-folder\build\web
Copy everything that is in the web folder to wherever you want to publish / host your application.
Your application is bundled up into a main.dart.js file.
An index.html is also in that directory. You should be able to run your Flutter web app by visiting that index.html.
All the instructions for building a Flutter application for web platform is here.
I’m unfortunately having difficulty deploying my ionic project for web. No matter what I do, commands such as 'ionic build, ‘ionic build --prod’, ‘ng build --prod’, or whatsoever always create a www folder that is incorrect. The index.html in this www folder is always blank when viewed from a browser.
I’ve tested this issue on other ionic projects as well (just generated some from templates) and the same issue occurs here, with the index.html in the www folder always being displaying a blank site. If possible, I’d appreciate any help if that’s OK!
ionic cordova platform add browser
ionic cordova run browser
ionic cordova build browser --prod
For testing purpose use ionic serve . It will rebuild automatically every time when you update your code.
have you changed the base href in index.html from
base href="/"
to
base href="."