I have a site https://resilium.group that I recently upgraded to Wagtail 4.2 and added a generic admin view using ModelViewset to.
Now, if I visit /admin, some of the css and js fails to load, whereas it did before and I don't know why.
Some observations:
All 404 errors happen inside wagtailadmin
Some wagtailadmin js will load. These are all in the vendor or images subfolder
Some of the hashed versions will not load, while the unhashed will load:
e.g. this will not load: https://resilium.group/static/wagtailadmin/css/core.7ffe08725eaf.css
This will load: https://resilium.group/static/wagtailadmin/css/core.css
The same goes for core.js, vendor.js, wagtailadmin.js, telepath.js, sidebar.js
And sometimes both will not load:
This will not load: https://resilium.group/static/wagtailadmin/js/vendor/jquery-ui-1.13.2.min.26d3af3a7ec4.js
This will also not load: https://resilium.group/static/wagtailadmin/js/vendor/jquery-ui-1.13.2.min.js
Same for icons.js
At this point, I struggle to even know where to look. I'm also having difficulty getting the issue reproduced locally. Everything works ok if I'm serving local static files. I appreciate any help you can give.
If this is a production site (i.e. not running with DEBUG = True), you need to run ./manage.py collectstatic. This step is necessary after any deployment that changes static files, including Wagtail upgrades.
It looks like Cloudflare is caching your 404s. Try purging the entire site:
https://developers.cloudflare.com/cache/how-to/purge-cache/#purge-everything
Related
Disclaimer: I am not a frontend guy by trade. I am being asked to deploy an Angular application other engineers have created.
I have gone through the process of deploying an Angular application to GitPages and have also tried the handy Angular CLI GH Pages library. However, they both have the same issue, and I'm not sure if it's the application itself or how I am deploying it.
The base page loads fine, but all other resources (image/font files, links to other pages, etc.) do not load properly. This is because they are not using the proper base URL; our corporate GitHub makes us use https://....com/<org>/<repo> as the URL. All resources outside of the base page are not prepending the /<org>/<repo>/ part to the URL, so they are all returning 404s.
My index.html file in docs/ contains the proper base href="/<org>/<repo>/" and the docs/ folder contains all needed images and font files in its assets/ subdirectory, so I'm not sure what gives. I have also copied index.html to 404.html.
Am I missing something? Or is it possible that this web application was not created correctly for GH Pages?
Thanks in advance :-)
Change the base href to index.html only and all will work from there
base href="index.html"
From there it will take the path properly
I need help on my react app portfolio that I've uploaded to Github. Link: https://amex23.github.io/my-portfolio/
The pages doesn't show up, thoug it runs fine in my local computer.
PLEASE HELP
The links to your content are broken.
In your source they are like:
https://amex23.github.io/amex23/my-portfolio.git/static/js/main.3ac9e73c.chunk.js
They should be like:
https://amex23.github.io/my-portfolio/static/js/2.df4fd8bb.chunk.js
You can open up your index.html and change them all manually but there is something wrong with your build step or site config that made them that way
Wanted to create a "tags page" that has all posts with a certain tag. I added it to the header of my website but I keep getting a 404 error. It looks like the tags page isn't building at all?
404 Error page:
https://tiffanychenster.github.io/personal-blog/tag/reviews/
Repo:
https://github.com/tiffanychenster/personal-blog
Confused as to why it works locally but not on Github pages. Thought it might be an error with my nav links but messed around with header.html a lot and got nowhere. Any help with creating the tag page on remote server would be much appreciated
GitHub Pages only allows you to run a number of whitelisted plugins, and jekyll-tagging is not one of them. This means the plugin won't run, the tag pages won't exist and you'll get a 404 response.
The suggested workaround if you want to continue using GitHub Pages and custom plugins is to build the site locally and commit the output. You could commit it to the same repo in a subfolder and then select that folder as your base in GitHub. Alternatively, you could keep the result in a separate repo (i.e. my-website and my-website-output). This way the source git history isn't tied to your output - as well as keeping each repo's file size down.
Another way altogether would be to create the tag pages without the plugin. It would be a bit more manual but not always unmaintainable depending on your use case.
Check out the ruby gem update_tags, which does what you're looking for and works in GitHub pages.
Here's some more context about how and why that gem works.
I have a React application created by create-react-app. The app works fine, but I have run into a problem
I need to test som ad things on a plain html site, no additional React code. The problem I have is that the ads.txt tags need to be crawled by Google, which can take up to 24 hours on a new page/URL, time that I don't really have.
So I did the following. In my repo under /public folder I added a folder /ad-test with an index.html inside. When I serve it locally using npm start and go to http://localhost:3000/ad-test, it works fine.
Great, I thought and deployed it to the production environment, but now when I try to go to http://[my-site]/ad-test or http://[my-site]/yo-test/index.html it does not work (I get the React 404 site that I created).
I looked here and if I understand correctly, it is not possible to do it the way that I tried since the build stage will not include the public folder. Am I correct in this?
Any idea how to solve this?
EDIT:
I have a good knowledge of React and React Router in general, the app already uses <Switch><Route ... /></Switch> with a catch-all route directing to Not Found Component and the bottom.
The problem I have is that we include some ad scripts from an ad provider. The ads are not displayed in the application (adblockers totally removed from browser etc.) and the provider thinks that we have made errors in the React code.
We don't think that we made any errors (the ads were displayed fine in our test environment but not in prod) and we have to prove that React is not to blame for the ads not showing.
To do this we created a static HTML file with all ads hardcoded, no React components or other things that might disturb. BUT, because of ads and Google crawlers and ads.txt, we need to have the static test page under the same domain as our main page/application.
This is why I ask if it is possible to somehow add a static HTML that can be reached from http://my.page/test-page.html without being "intercepted" by react router, i.e. it exists outside React but on the same server.
When you use react by create-react-app, it means you are building a single-page application.
What this means is that after running npm run build you will have a build folder with only one html file called index.html in that fold.
This index.html does not know and has no relationship with your added 'index.html' in ad-test folder.
If you want your ad-test html to be recognised by react, you need to make it a component of app.js and use react-router to give it a pathname.
It is very simple.
First, install react-router-dom;
Second, set up react-router-dom;refer to https://reacttraining.com/react-router/web/guides/quick-start
Third, give your add-test component a pathname.Your js code should look something like this:
<Route path='/ad-test' component={AdTest} />
IMPORTANT:
After you deploy your app, always remember you just built a single-page application.
You only have one html in your app.
Please make sure when you test your app after you deployed you must tell your service provider that no matter what pathname a user inputs in the address bar you always redirect it to the index.html
The build stage includes the public folder:
If you have a picture in the public folder, and this picture was imported to other components it will be shown after you run npm run build
Hope it helps.
Have you tried playing with webserver configurations? It is usually setup to redirect all traffic to index.html. Maybe exclude your static html path from redirection?
Place test-page.html in public folder like
public/path-to-static-html/test-page.html
Configure webserver for
directing all traffic to index.html EXCEPT /path-to-static-html which
will be directed to test-page.html.
For example, in case of Apache
you will be setting the DirectoryIndex directive.
Coming from a PHP background, I used to have an index.php which does two things:
serve the webpage if no parameters were set;
or serve JSON data when a specific POST parameter was included in the request.
Something like this:
// -- index.php
<?php
if ($_POST["some_parameter"]) {
...
echo json_encode(someArrayData);
exit(0);
}
?>
<html>
...
</html>
I have built the complete frontend application with npm, webpack, webpack-dev-server, and react. Having completed the first part, how can I effectively serve JSON data instead of HTML when a request includes a specific POST parameter?
I can see 2 ways of doing this:
Build the frontend as usual and everytime I build the bundle, modify index.html, inject my PHP code in it, and rename it to index.php. I then would have to run this folder via apache or nginx, so I'd be able to run the index.php script. This method is downright ugly and is probably the worst way to do it.
Run a separate PHP server which just serves data or redirects to the static webpack-generated build. All requests should then start from this server, and this server determines whether to serve data or redirect to the frontend. The problem comes to neatly passing the POST data received from the request to the static react app. As far as I know, the only way to do this would be to include a URL (GET) parameter to the redirect and manually parse it with javascript on the frontend. This is a dirty solution, in my opinion.
So, to summarize:
I need an efficient way to get POST data in a react/webpack/webpack-dev-server environment.
It should work with my hot-module-replacement dev setup.
I'm fine with switching to a node-based backend like express.
There shouldn't be any ajax involved in the static react app.
Any ideas? There has to be a way to do this properly.
UPDATE: I solved this by simply copying an index.php from my source directory to my build directory via the webpack config. I serve the build folder to a PHP server and keep a webpack --watch building my source.
I lose built-in features like auto-reload and css injection, but it's worth the convenience of not having to implement SSR for a very simple task (getting a single POST variable).
For anyone interested, I also added 2 npm scripts:
npm run start runs my original webpack-dev-server with hot-reload, serving static content including a static index.html file
npm run static runs the webpack --watch which copies the index.php file to the build directory
This lets me have hot-reloading when developing frontend, and allows POST data fetching when programming logic.
It's easy, convenient, and works on most web hosting providers.