I'm not having any luck getting this to work. I've tried several configurations, as described here, here and here, but no matter what I do, page refreshes all end up with a 404. If I put <my_base>/#/myPage into my browser's URL bar, the page loads as expected, and the '/#' disappears. Then, if I try to reload, I get a 404. My setup is a single-page Angular web app: index.html has a single element that is the app's directive; this template has a navbar and an ng-view element that routes to the various pages.
According to sysadmin, Apache's AllowOverride value is set to "None", which means that .htaccess files "won't work."
Related
I recently hosted in Netlify through github and my website which is rendered from reactjs. My website link is https://realhomes.netlify.com/ . So when i try to reload my website from other page except from home(index page) it shows broken link and i don't know how to fix it. Please help.
It looks like you're using react-router within your site to route between different pages. If that's the case, you'll need to tell Netlify to serve the index.html file for everything, not just the root of the site.
From this netlify blog post
If you choose to use something for routing (like React Router for example), you will need to set up a redirect and rewrite rule for the single page app.
Try adding /* /index.html 200 to a _redirects file in your publish directory or the following to your netlify.toml.
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
Read the docs here
In the public folder create _redirects file and add /* /index.html 200, now your app will not crash on refresh.
If someone wants to know how the netlify.toml file looks like you can find it in my
github repository in Link Here and it works.
I used create-react-app to bootstrap my project.
I added react-router to my react app. After I build and serve using serve -s build, when I go to any path such as http://localhost:5000/favicon.ico, it takes me to my index, which means the URL change is being captured by react-router. However once I'm there, if I force reload the page with CMD+SHIFT+R then the static file loads as expected. How do I make this behavior the default?
According to the FAQ, when a site is served statically it needs to use HashRouter instead of BrowserRouter
https://github.com/ReactTraining/react-router/blob/master/FAQ.md
I also had to disable the service worker by commenting out two lines in src/index.js since it was caching everything all the time.
Making that change fixed my problem!
My Wordpress website, www.the-family-historian.net, goes directly to /index.html, which doesn't exist. I have it set in the Wordpress backend so that the landing page is the posts (blog) and not a static page, but this "index.html" seems to be blocking it. Thanks for any help!
Try setting the following at the top of the .htaccess file:
DirectoryIndex index.php
This should force any request to go to index.php first and ignore index.html, not a 301 redirect though.
Using an FTP program, or possibly a web based file manager, view the files that make up your website. Find an option to view "system / hidden files" in order to view the .htaccess file. I suspect you will find a rewrite rule in it pointing to index.html Simply change that to index.php and all should be good.
What I'm trying to do is have a single dynamic file that takes a parameter to affect content (/view.html?k=about) but uses history.pushState to change the URL to something more user-friendly (ki/about). In addition, anytime an AJAX call is made on content.html to load new content, it updates the URL according, (e.g. if products are loaded via AJAX, change URL to keywords/products).
My current solution is any path requested from ki is redirected via .htaccess to the view.html page. view.html then uses history.pushState to change the URL. As links are clicked, the URL updates. The problem with this, however, is it causes a infinite loop.
Here is my .htaccess file, residing in the /ki/ folder.
RewriteEngine on
RewriteRule ^(.*)$ /concept/view.html?k=$1 [R=permanent,L]
What can I do to get my desired result? If there's a way to achieve the same thing without the .htaccess file then that's acceptable too.
You are going to want to rewrite any url that goes in the form of ki/about to the /view.html?k=about behind the scenes.
history.pushState is only really meant to be used for web applictions like Spotify that don't reload the page but would still make sense to have the back button have some functionality.
That way, urls can be shared without giving 404 pages.
I have not tested this but I am sure you want something like this
RewriteRule ^ki/([A-Za-z]+)/$ /view.html?ki=$1
If the user types in the ugly url, they will still get to the same page no problem. But the pretty urls will direct users to the right webpage.
For more info you can go here.
http://www.yourhtmlsource.com/sitemanagement/urlrewriting.html
I am a beginner with node.js and am using express with the ejs layout, and I want to know how to get rid of the .html extension when putting up a page. For example if I go to my localhost:3000/about.html - that works but I want it to show up as just /about. Also, having trouble figuring out how to change the favicon if anyone knows how to quickly change that from the express default.
Any help would be great thanks.
(I realise this question is old, but it appears high in Google search results, and the accepted answer isn't the best solution.)
The best solution for serving up static content in express.js is express.static. To avoid having to specify file extensions in URLs you can configure it with a list of default file extensions that it will use when searching for static files:
app.use(express.static(pathToBaseFolderOfStaticContent, {
extensions: ['html', 'htm'],
... // Other options here
}));
This will serve up pathToBaseFolderOfStaticContent/somePage.html or pathToBaseFolderOfStaticContent/somePage.htm in response to a GET request to http://www.example.com/somePage, which is what you want. For example, if you visit https://arcade.ly/star-castle, the file it serves up is just a static file called star-castle.html. I haven't had to add any special routing for this, or any other static file - it's all just handled by express.static.
I only need to add specific routes for content that requires active work on the server to return. A big advantage here is that I can use a CDN to cache more of my content (or nginx if I were running an internal line of business app), thus reducing load on my server.
You can obviously configure as many default file extensions as you like, although I'd tend to keep the list short. I only use it for resources where the URL is likely to appear in the address bar, which generally means HTML files, although not always.
Have a look at the following documentation on serving static content with express.js:
http://expressjs.com/en/starter/static-files.html
http://expressjs.com/en/4x/api.html (the express.static documentation is at the top)
This is also answered at In express what is the common way to associate a default file extension with static content requests?.
The favicon.ico issue can be solved by dropping your favicon into the root folder from which you serve static content, as well as implementing +Costa's solution where you reference it using a <link> in the <head> of your documents.
In theory you shouldn't need to do put the favicon in the root folder but, in practice, some browsers will still ask for it from the site root even though it's referenced in the <head> of your document. This leads to a spurious 404 error that you'll be able to see in client side debugging tools (e.g., Chrome dev tools).
The Favicon issue is usually a caching problem. As long as you have this code in your base html layout:
<link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico">
Then just navigate to wherever that image is with your browser, and that should force your cache to update.
I figured it out. I looked at this post Render basic HTML view? which solved the problem I was having.
app.engine('html', require('ejs').renderFile);
app.get('/', function(req, res){
res.render("index.html");
});
And this all goes in the app.js or whatever file you are running.