I have an ember app that works by itself, I am able to run the server and see it. I then ran ember build, and opened up the /dist/index.html in my browser. I was unable to load any css or js in the /dist/assets folder, and it was instead looking at my root filesystem. I opened up index.html and commented out the <base href='/'>. After doing that I was able to load the css, and js. However, I am getting a security issue. What am I doing wrong with this build process, and should I have to comment out <base href='/'>?
The security issue I got was Uncaught SecurityError: Failed to execute 'replaceState' on 'History': A history state object with URL
If you open a modern SPA's starting html directly with its file://... in a browser, it will almost never work. Browsers treat files opened from the local file system different then html sent by a server.
So what you should do is always use a webserver to deploy your files to your browser. In a typical ember app you should also deploy the app to the root folder, and configure your webserver to always sent the index.html out if no other file matches the requested path, so that the ember router can start doing its own routing.
This can be done in almost every webserver, like apache, nginx, IIS, and anything else. But how to do this on a special webserver is a question not about ember but about that webserver.
Related
I built an Edge Ledger website, did the HTML and CSS styling using VS Code. When I run it with live server it works fine, the CSS styling I did is implemented but if I just go to the root folder and open the index.html file without using VS Code to run it, it just shows the HTML element without the styling. Can anyone help?
I tried opening the index file without VS Code, it just loads the HTML file without the CSS.
When I run this with live server on VS Code the CSS styling I did is applied to the index.html page
What could be the problem?
Explanation
The issue with opening an HTML file directly is that now your computer's own hard drive is the "server" serving the files. As such, the browser asks your computer for your CSS files at the directory /css, the / indicating the root directory of your whole file-system.
For your computer, there's a couple of issues with that. Routes starting with / are usually used on UNIX-based systems (think of MacOS or Linux distros like Ubuntu), but since you're using Windows, that type of a directory or path won't resolve to anything. And even if you were using MacOS or Linux, you most likely would not have your CSS files in /, as that would be like having them right under C:/ in Windows.
This is the reason why when serving the HTML files over a proper server, the / path is correctly resolved, as there / indicates the root of your web server's directory, and not the root of your file system.
Solution A - Local file server
If you'd like to keep your code as-is and you have either Python or Node.js installed locally on your machine, you can use either of them to spin up a lightweight HTTP server to act as a static file server.
# Python 2.x
python -m SimpleHTTPServer
# Python 3.x
python3 -m http.server
# Node.js with npm
npx serve
Now visiting http://localhost:8080 (or whatever port your terminal tells you), should serve up your HTML file and correctly resolve the CSS asset paths.
You can find a large list of other static servers for different languages here: https://gist.github.com/willurd/5720255
Solution B - Relative file paths
Another solution is to remove the / prefix from your asset paths, making them relative paths to the index.html file. Note that this could lead to other unexpected scenarios in the future, for example if your index.html file is also served for an /about page, then the CSS asset paths would now resolve to /about/css instead of /css (as the css/... path is now relative to the current path and will be appended to it). So even though this is a cheap and quick fix locally, it's not considered the best practise.
I have a script that generates sitemap.xml file in the public directory. It is accessible in localhost:3000/sitemap.xml when it is in development. But when it goes for build, I cant access the file from the public folder. I made some research and I found out build doesnt have access of the public folder! Please help me with a way to access the public/sitemap.xml if there is any, if not is it possible to show .xml format as a page in reac-router-dom?
Reading through your question and comments there isn't a lot to work with, however I can inform you of a couple of things.
The reason your sitemap might work locally and not on a build is because you're very likely using webpack-dev-server (if you're using CRA then you're using it), which in return uses express to locally serve your files. When you build it will no longer be using that server and you'll need your own custom server.
When you build your files for production it will output all your files to static js/css files which then need to be served using some or other server (express/nginx/apache). In your question you've not specified what server you're using, beyond the development server, so I can only assume that you probably don't have any and/or are depending on some host that you're using without realizing that you're using one.
When you want to serve something like .xml, you have to configure the server to actually serve .xml files. Also you should not be serving .xml as any form of react route, it's not a route and it has nothing to do with react. Your request should directly hit the server, i.e. nginx, and that server should be configured to serve the .xml file.
In your comments you mentioned that it's "sitemap.exe", I'm not sure if that's a typo but you can't serve and run .exe files over web and no server will be configured to do so by default. The sitemap.xml or sitemap.txt should contain only the valid xml or text content and also make sure it's actually in the build directory once you've built it.
If the .xml exists in your build and all of that's fine then the only thing left you need is to add a location block to your nginx server, or to add a get route to your express (or static resources) in order to actually serve that file. If your server is giving you a 404 at that point it likely means it isn't recognizing .xml files at all. That needs to be configured in your server.
In nginx it means you need something like location = /sitemap.xml.
In express it means you need something like app.get('/sitemap.xml').
A default nginx installation with try_files $uri $uri/ =404 should work for .xml as well.
I solved a similar issue by going into the "Rewrites and redirects" section and adding a rule says the "source address" of "/sitemap.xml" will redirect to "/sitemap.xml" and prioritized that rule over the rule in which </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json)$)([^.]+$)/> is redirected to /index.html.
I'm trying to run the react-staic-boilerplate on my local machine without using node, by opening the index.html file under public folder (after running yarn build/npm run build).
When I double click the index.html to serve on chrome, inspector tells me that the pathing to /dist/main.xxxx.js is wrong - which is fine, I go and manually fix the pathing error inside index.html. But then index.html instantly redirects me to the 404 page, telling me that Pages xx cannot be found. I tried debugging in vain but there's 30k lines of code after webpack compiled the whole thing.
Why is this the case? Shouldn't the buillt static files work on chrome without relying on serverside technology(node)?
I mean, index.html works fine when I upload the entire public folder onto aws s3. The mainpage, links, everything works after I point the entry point on s3 as index.html.
So if I'm understanding this correctly, aws s3 simply serves files, and if it works on s3, it should work on local machine (without node, since react-static-boilerplate can be pure clientside without relying on server).
Will anyone help me out? The backend teamlead refuses to approve any sort of react boilerplate unless we can prove to him that it runs on chrome clientside 100% without using node/serverside assistance.
I've been working on an app which will feature a Timelinejs (open source js library) element on the client side. I copied the Timelinejs library into my public/javascripts/ directory of my app. Then I linked it in my html header. When I serve my app up locally everything works fine with the timeline. However, I noticed that when I deployed my app to Heroku it wasn't loading my timeline. Using chrome js console I discovered that it didn't find my files in the public/Javascripts/Timelinejs folder. Using the Heroku run bash command I discovered that none of my Timelinejs files were present in the file structure, although an empty Timelinejs directory was present. Is there any command or configuration I need to specify to get these files to my Heroku deployment?
Heroku has a readonly file system. The directory where you can write are ./tmp or ./log. You can't write inside the public folder.
That's because of how they manage their dynos and the way to scale them. If you want to store something, use the ./tmp or, recommended, a s3 bucket. (as I presume 'tmp' stands for 'temporary' :D)
More info here: https://devcenter.heroku.com/articles/read-only-filesystem
I have an application, which uses socket.io, and when I try to build the app, it says:
failed to open file file:/socket.io/socket.io.js JavaException:
java.io.FileNotFoundException: /socket.io/socket.io.js (No such file or directory)
I use node.js as a back-end, so I do steal('/socket.io/socket.io.js') on the client side. I am guessing steal/buildjs, which I'm using, is trying to get socket.io.js into a production.js. How can I exclude it from the build?
Thanks.
You don't put socket.io.js into your build. It has to be included from your nodejs server via it's own script tag. Put the tag in your app's HTML file.
Alternatively, you can load it dynamically like this:
$.getScript('//yoursocketio.server/socket.io/socket.io.js',function() {
io.connect('yoursocketio.server').etc();
});
But you should never steal it.