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>
Related
I am trying to install Wordpress using this tutorial https://cloud.google.com/community/tutorials/run-wordpress-on-appengine-standard.
I have it deployed, but when I try to have it as "subfolder" /blog service of the main domain using dispatch.yaml, the site seems to load (e. g. file /blog/2021/05/27/hello-world/), but the css and js files throw 404 error.
E.g. /blog/wp-includes/css/dist/block-library/style.min.css?ver=5.7.2.
I have also changed siteurl in the database, but that does not seem to work.
Check your static file handler in app.yaml. Since you are putting your site under a folder (sub folder), calls to your static files start from /blog/. This means the handlers for your static file should also start with /blog/
We created a landing page in Webflow and exported the code. We now have a HTML, CSS, JS and images from this export.
Our app is built with Next JS and hosted on Vercel. I would like to serve the static site above from certain routes like /, /pricing, /about, etc. and our own app on others.
We've looked at custom server on Next JS but that's not compatible with Vercel. Also looked into Rewrites but that has lower priority than static pages, so won't work.
We used to have a Node app and could just direct certain routes to serve static HTML and other routes would point to our React app. Not sure how to do this in Next JS. I'm hoping to have a similar setup with Next JS, but can't seem to figure it out after a lot of searching.
What is the best way to host our static Webflow site at the root and certain other paths in a Next JS app?
Figured out how to do this with Rewrites.
Export your landing page from Webflow or any other landing page builder. Put it in the /public folder of your Next JS project. Rename the index.html of your landing page to something else like landing.html. Rename pages/index.js.
The order of execution in Next JS for choosing what to display is:
File in public folder
File in pages/
Rewrites
So we removed index.html and public/index.js so that our rewrite can handle it.
Add the following rewrite to your next.config.js
{
source: "/",
destination: "/landing.html"
}
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.
I have an existing SPA app . This SPA was developed with Aurelia . The app is loaded from index.html file.
I need to host the app into meteor saving these options :
1. Meteor shouldn't build the SPA app (ignore building it each time it changed).
2. How I can request the index.html file from meteor in order to load the app .
Thanks in advance ...
As for preventing Meteor from touching your index.html file, you could simply place it in the public special folder.
To serve this file, you could for example have an iframe which points to your file (do not include public/ in your path, e.g. if your file is in public/spa/index.html, use src="spa/index.html")
I have developed a HTML5 website and was working perfectly fine in my localhost. But when i try to host the same pages in 000webhost.com all the CSS , Images , JS files are not loading, which are working good in my xampp localhost.
Folder Structure from hosting provider
//index.php code - this is by default available in the .htaccess folder, do i need to modify something here?
<?php
// Powered by Zyro
include dirname(__FILE__).'/vXXXXX,com/index.html';
?>
Error Logs from Console when loading the index.html page fro hosted server.
This is the first time i am hosting with this hosting provider, and facing the same issue of not loading the CSS with other projects also.
Did i miss something ?
In the folder structure , there is an index.php given by the hosting provider by default. Deleting the index.php file and moving my html files out of the folder and placing along with htaccess files has worked.