How should nginx be configured in order to serve a manifest.json from the root folder of my app?
I have added an entry in mime.types:
application/x-web-app-manifest+json webapp;
and since I use json I have added a location entry in my sites-enabled configuration:
location /manifest.json {
default_type application/x-web-app-manifest+json;
}
but my manifest.json is still not served correctly.
any idea what did I miss or what should I configure differently?
Well actually my configuration above is correct, my problem was the cache on my phone ;)
Since I already had accessed my PWA before making the corrections in my nginx, my manifest.json was cached with a bad content
Clearing the Google Chrome cache on my Android phone and trying again, of course after having applied my configuration and restarted nginx solve my issue
I use nginx as part of a progressive web app and I have not changed the configuration of the server at all for the manifest file.
The requirement fro deploying it (from MDN among others) is to refer to the manifest file in your html head like this:
<link rel="manifest" href="manifest.json">
Is there some more information you can share about your problem?
Related
I created a Blazor project in VS. If I press the Run button, it shows up in the browser and functions normally.
The problem is that the free hosting site only allows a sub-directory of the host URL. That is, something like "https://myid.hostingsite.com/projectname". In the configuration page, it seems that I have to use a command like dotnet test.dll -urls="http://$IP:$PORT", where $IP and $PORT are internal values provided by the system, and some sort of reverse proxy maps it to "https://myid.hostingsite.com/projectname".
If I run the Blazor project on that hosting service, it tries to load the css file from "https://myid.hostingsite.com/css/bootstrap/bootstrap.min.css" when it should be "https://myid.hostingsite.com/projectname/css/bootstrap/bootstrap.min.css".
How can I solve this problem?
The CSS can be fixed in index.html or index.cshtml with
<base href="https://myid.hostingsite.com/projectname/" />
See if the rest still loads.
We are having an issue getting our favicon to show up. Little background on the app setup. The application is a React app that is served up by Nginx. We did have to make a change to the default.conf file to add a location block to for an alias with the path to the favicon to get it working in Docker. So, from Docker the favicon now shows up just fine when ran locally, but when deployed to our K8s the favicon no longer shows up. I did test with private mode/incognito to make sure it wasn't a caching issue.
Favicon is located in the root of the app along side the index.html.
I haven't been able to find anything that has really helped with resolving this issue, but I do believe I need to reference either the nginx's conf file or the favicon in the deployment yaml.
Has anyone ever dealt with something similar to this before or have any ideas?
Turns out for this scenario. Since the browser tab was opened by another application, it was the path to that apps favicon I needed. For some reason it was trying to look in that folders directories. Doesn't make a lot of sense why it would to me but it is better to have one source.
I am currently trying to build a WordPress theme using React/Redux. Everything is working as expected except for responding with 200 when offline.
The build folder of CRA (Create React App) is located at /wp-content/themes/pwa/build.
When online, WordPress loads the index.php for all routes. This registers the .css and .js from the build folder. Here everything is working as expected.
Im trying to understand how to configure CRA / WorkBox to register the service worker at / and serve all pages using the index.html in the build folder whilst offline.
Full url of index.html: https://example.com/wp-content/themes/pwa/build/index.html
I can provide a link to the demo if required.
I finally solved the problem with some help from W3C.
Pass scope option in /src/serviceWorker.js of the react app.
// navigator.serviceWorker.register(swUrl)
navigator.serviceWorker.register(swUrl, {scope: "/"})
Configure Apache to serve the Service-Worker-Allowed header for the deployed service worker.
<Files "service-worker.js">
Header Set Service-Worker-Allowed "/"
</Files>
I am using React single page app for my application. I have hosted solution on IBM Bluemix using cloud foundry. I want 2 help.
How to override existing nginx configuration with new one to support URL rewrite for my react routes?
What are the url rewrites configuration for nginx server? (I am using nginx for the firs time)
Here is my manifest.yml which I have used to host on cloud foundry. I am using staticfile-buildpack for node.js.
applications:
- buildpack: https://github.com/cloudfoundry/staticfile-buildpack.git
name: xyz
memory: 128M
stack: cflinuxfs2
path: build/
routes:
- route: xyz.eu-gb.mybluemix.net/
- route: xyz.eu-gb.mybluemix.net/store
- route: xyz.eu-gb.mybluemix.net/checkout
Here xyz is my app domain. I am able to load my app and pass through click action to other routes but when I hard refresh or change url from browser address bar it shows me 404 error.
Can someone please guide me here to resolve above issue.
Thanks.
How to override existing nginx configuration with new one to support URL rewrite for my react routes?
You can override the nginx.conf, but it's not recommended with the staticfile buildpack. Instead, try to use the configuration options provided by the buildpack to achieve your goal. The buildpack has a lot of common options, so you don't need to drop down to the level of configuring Nginx yourself.
https://docs.cloudfoundry.org/buildpacks/staticfile/index.html#config-options
Here xyz is my app domain. I am able to load my app and pass through click action to other routes but when I hard refresh or change url from browser address bar it shows me 404 error.
It sounds like you need to enable pushstate support. Adding pushstate: enabled to your Staticfile I think that should fix your issue.
What are the url rewrites configuration for nginx server? (I am using nginx for the firs time)
You can look at the Nginx configuration that's generated for your app. Once your push your app and it starts, run cf ssh <app-name> -c "cat app/nginx/conf/nginx.conf". That should dump the nginx config to your screen.
buildpack: https://github.com/cloudfoundry/staticfile-buildpack.git
Don't point to the master branch of any buildpack. It's a moving target. Commit to commit can change or even break.
You should generally use the buildpack that's provided by your operator. If you run cf buildpacks you can see the list there. If that's not new enough or your provider doesn't include a buildpack you need, you can use the git repo syntax to link to a repo online, however make sure you include the #<branch|tag> in your URL.
Ex: https://github.com/cloudfoundry/staticfile-buildpack.git#v1.4.29
This locks in the buildpack to a tagged release which prevents it from changing out from under you.
This question is related to this SO question, but the recommended solution in the comments to use Meteor.absoluteUrl() doesn't seem to be working as expected. I want to be able to deploy multiple meteor applications to the same server and use nginx as a reverse proxy to each application.
Because each application is segregated none of the applications are going to be accessible from the ROOT_URL, but Meteor is only using the ROOT_URL to reference back for the assets it needs to load a meteor app.
I tried appending to the address using Meteor.absoluteUrl() in the server's startup, the client's startup function, and outside of the client's startup function. It had no affect in any of these places.
For example. I have nginx listening at /site1 for server_name: example.com and a reverse proxy to port 3001 to my meteor application.
When going to the site it initially loads fine but the browser dev tool shows Meteor is trying to find the javascript and css files at https://example.com when it should be looking from a base url of https://example.com/site1
Meteor.absoluteUrl("site1",{ssl:true}) was set in Meteor.startup() to try and force that as the correct path. As you can see, I am only appending to ROOT_URL with no leading / as described in the Meteor documentation.
I'm using meteor up to deploy and here's how the mup.json environment settings look:
"env": {
"ROOT_URL": "https://example.com",
"PORT": 3001,
"MONGO_URL": "mongodb://user:password#localhost:27017/db"
}
Any clarification about this this should work is greatly appreciated.
Using sub-domains suggested by apendua seems to be the easiest way to accommodate multiple Meteor applications on the same server behind nginx (if you that option available to you).
Register a sub-domain for each application (i.e. app1.domain.com, app2.domain.com, etc.)
Add an nginx server configuration for each sub-domain, setting the server_name property to your sub-domain address.
Add a default location for that server and set your proxy_pass to http://127.0.0.1:port where port is the port number you set in your environment configuration when you deployed your Meteor application (in my case I set this in my mup.json).
The root url for public assets under a meteor app is actually at /public. Each of your apps has a different base directory for the app. Assuming that you have an overall structure that looks like:
app1/ - nginx maps to https://example1.com/
client/
lib/
public/
server/
app2/ - nginx maps to https://example2.com/
client/
lib/
public/
server/
etc...
Then each app's public assets will just be under Meteor.absoluteUrl() which will serve files from app/public. Meteor.absoluteUrl()+"app1" has no meaning.