Webpack-dev-server displays listing of "magic html" - webpack-dev-server

I have a webpack config that I've been using across a few projects. It seems to work fine most of the time, but sometimes, it serves up a list of files instead of the web page. This isn't the same as the normal directory listing; rather, it's referred to as the "magic html for .js". What was interesting is it was very intermittent. I thought it was a browser or configuration issue initially.
Screenshots:
Firefox
Chrome

While posting this, I noticed that in one address, there is a trailing slash webpack-dev-server/, while in the other, there was no slash webpack-dev-server. The missing trailing slash was the problem.

Related

React app with nginx returning blank page

I have a react application that I've deployed using nginx, which however only return a blank page. I've been looking for a solution for the last week and I can say that I tried almost anything... but nothing seems to work.
If I open the console I can see that all of the files are delivered with success, however, I got a "Loading failed for the with source ..." on firefox and a "net::ERR_HTTP2_PROTOCOL_ERROR 200" on Chrome. The weird thing is that both files are actually received (200 status) and can be viewed with the development tools. Moreover, if I visit the static resource link I get the full content without problems.
And of course, the issue is only when using the production environment, if I deploy it locally it works perfectly.
I really don't know what to do. I've tried updating the "homepage" directive, playing around with "react-router", changing the various nginx configurations and many other things but nothing.
If anyone could help me out I would really appreciate it!
I was running nginx with docker on Raspberry and, for some unknown reason, the timing on the container was completely messed up. I solved the problem by running the container in privileged mode ('privileged: true' on docker-compose)

Tags page in jekyll site working locally but not on GitHub pages, gives 404 error

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.

create-react-app with multiple entries

I have a create-react-app project where I am creating a front side for users and an admin side, and want this two sides to use the same code base and run on one time instead of building two separate apps and each will use a different theme and files.
As suggested in some places I have ejected my create-react-app App and then tried adding a different entry point as suggested in this tutorial:
http://imshuai.com/create-react-app-multiple-entry-points/
but when i navigate to /admin nothing happens...any suggestions?
I am using react-router-dom as well.
When you navigate to /foo Webpack dev server has a little convenience feature to consider /foo/index.html as well if /foo does not exist. This is probably meant to be compatible with the user's expectations of other HTTP servers (i.e. Apache, Nginx). This means that /admin resolves to either something actually called /admin or /admin/index.html if the former is unavailable.
If you did follow the linked tutorial, the path you are looking for is clearly not supposed to be /admin but /admin.html. And your normal 'user' front end remains at /index.html, which is why you can still navigate to it the same way you were used to before ejecting.
Note: I don't speak Japanese, but I do read Webpack, so I just looked at the sample Webpack config and layout of the build/ folder as described in the tutorial.

Uncaught Syntax Error ... < , why would my browser think my index.html is a javascript file?

Need some experienced eyes to tell me what's going on.
I got this nice message.
so when I dutifully click on mainCtrl.js:1, devTools show me this.
How in the world did my browser decide that my index.html is now mainCtrl.js ?
You can already see my index.html in the window above... It is a direct copy of this.
...and here is just one of the script tags causing me this grief (they all give this same Syntax error)...
<script src="app/controllers/mainCtrl.js"></script>
There is no minifying or grunt/gulp action happening at all, so what could be causing this confusion?
all the js files are loading fine too, according to my nice morgan log
This happens because you have an error in your (presumably Express) routes.
You probably have a catchall that is serving the index.html file. Further up in your route definitions you need a route to serve your .js file.
Just for the record (answered in the comments): Some express middlewares can be the reason for such rewrites, especially when using the html5 history api for client side routing. (for example https://github.com/bripkens/connect-history-api-fallback - which by default only responds to urls not containing a dot.)

Cakephp 2.1 White Screen on Devserver

We created a subdomain on our server. First we tested that HTML worked, then I did phpinfo() and everything worked fine there. But when I moved the entire Cakephp app to the devserver at:
dev.lessonshark.com
I get a white screen. But I can go to:
dev.lessonshark.com/css/front.css
and that routes fine.
What I have done so far:
1. Made debug in core set to 3.
2. Removed all the cache files in tmp folder.
Still no luck, any ideas?
Firstly, check your server error logs. White screens are usually one of the following:
You didn't clear out the files in /app/tmp/cache (leave the
directories, remove any files).
You are running out of memory (check the server logs)
mod_rewrite is not enabled on the server or is not configured correctly (check you have allowOverride all set in your apache config so Cake's .htaccess files are read)
[edit]
you haven't made your app/tmp directory writable by the web user
I just cracked my head with this problem.
If none of the above mentioned solution work, (debug, emptying cache..etc), try this one.
Open up your controller, remove any unwanted empty line especially at the top of the file anywhere around you <?php tag, and make sure no useless empty line around the closing ?> tag as well.
I hope it help.

Resources