I'm trying to create a website using Bootstrap Studio and I'm using a Model View Controller with a RESTful API as middleware. When I test my HTML file for the frontend locally, in its folder, it loads as expected. However when I save it into the XAmpp folder and try to load the page as a view through the Index page, it breaks and I get this error in the console: "GET http://localhost/assets/bootstrap/js/bootstrap.min.js net::ERR_ABORTED 404 (Not Found)"
I have tried to move the assets folder into my view folder, I've tried changing the file path in my HTML when loading the CSS files. I've also added 'type = "text/css"' as that was causing a different issue. I've tried looking to look up an answer for myself, and read that because of the middleware, it's trying to authorise the CSS on a page that's also trying to get authorization? However, the thread didn't offer a solution or a workaround...
.htmacces file
RewriteEngine On
RewriteRule ^([^/]+)/? index.php?url=$1 [L,QSA]
Example of the CSS call
<link rel="stylesheet" type = "text/css" href="../assets/fonts/font-awesome.min.css">
Everything works as expected until I try and load the page through the MVC model which redirects all requests to my index page, then loads a view depending on what URL is attached.
Related
Google crawl-bot is triyng to access https://my-website.com/.../index.231e3e.css
But, because my app is a react-router app, I have this redirect rule configured:
[[redirects]]
from = "/*"
to = "/"
status = 200
force = false
which redirects the css path to the main home page (loading the website, rather than a css file).
I'm not sure how the CSS gets loaded in the background when you do visit the normal website - because the styles load in fine - but when I directly access this css link, it redirects to the home page.
I'm wondering how I can fix this redirect issue allowing google indexer to properly style my page (currently the page looks broken in the rendered screenshots, due to the missing css files which failed to download).
It seems now the css loads (maybe 1 time error) but the web page is still rendered incorrectly with no css
I have a Gatsby blog. I am writing a set of tutorial posts for coding games in create-react-app. In my Gatsby post markdown, I'm trying to link to the built version of the demo react app for that post hosted on the same server, but Gatsby keeps giving me a 404 page.
I am using nginx. All the contents of the public folder resulting from gatsby build sit in the var/www/html directory of my webserver.
The create-react-app build sits inside var/www/html/tutorials/01/, and has its own index.html file.
In my markdown I have tried both these formats of links: view the code [here](/tutorials/01/) and view the code [here](//165.227.94.249/tutorials/01/).
If you're viewing the post in your browser at //165.227.94.249/posts/tutorial-01 and click on the link, it'll take you to //165.227.94.249/tutorials/01/ but display a 404 page. But if you refresh the browser at the same URL, the working react app will be served.
How do I keep Gatsby from overriding this request and showing a 404 page instead of just letting the web server serve up the index.html file that exists at that url?
The internal links in your markup are automatically converted into Gatsby Link while you build. Gatsby Link is only for internal ressources from the Gatsby build. Your create-react-app app is on the same server but outside the Gatsby build process.
From the documentation:
This component is intended only for links to pages handled by Gatsby.
For links to pages on other domains or pages on the same domain not
handled by the current Gatsby site, use the normal element.
I think using the full URL inside the markup including https might be successful: https://165.227.94.249/tutorials/01/
PS: When I tried I got a connection timeout from your server.
You should try to disable gatsby-plugin-catch-links. In case this doesn't works try to catch the onClick event, cancel the event and trigger your own redirect.
function processExternalSameDomainLink(event) {
window.location.href = url
event.stopPropagation()
event.preventDefault()
return false
}
<a href={newTo} onClick={processExternalSameDomainLink}>
I have a single page application that does not use hash URLs I want to use the history API. I am using the middleware historyApiFallback() in browserSync server options. However, this is only working for one level deep URLs:
http://localhost:3000/main correctly resolves to index.html
BUT
http://localhost:3000/main/a is NOT working. The browser shows "connected to browser sync" and then a blank page is displayed.
Anyone knows what could be the issue here?
The issue was that the URLs for js and css resources weren't correctly setup. This post helped me fixed the issue: mod_rewrite to index.html breaks relative paths for deep URLs
I have a page which works locally but when deployed, none of he CSS works. in Firefox I get these errors. I never used to get this before. Any idea why this may be happening?
Also, when viewing the source of the page I can see this
<link href="/Content/css/foo.css?v=1.0" rel="stylesheet">
The resource from this URL is not text: http://foo.iat.company.local/Content/css/foo.css?v=1.0
</link>
The errors you're showing in console seem to suggest that the first line of your JS files is <!DOCTYPE html>, which it shouldn't be for JavaScript files!
I suspect that your links to the stylesheets aren't working and it's instead returning a 404 page (the screenshot certainly seems to suggest it's returning a document with HTML in it).
To try and double-check:
open up the page in Firefox and view source (right-click and 'View
Source');
In FireFox source view the assets URLs will be hyperlinks;
try clicking on the link for one of the JS files and see what gets
displayed.
I suspect you're going to find it returns you an error page and not the JS you expect!
If that's the case, you need to take another look at your folder structure and try and work out why your markup is pointing at the wrong place.
Check what your CSS files stored in correct place. Try open URL to CSS in browser. Also check in Firebug in tab Network what files loaded and from what URL. There is similar to your pages tried load CSS files from incorrect URL and got page for 404 error.
The problem was that the Content folder didn't have permission that it required. I added he following users to the security tab of the properties window of the Content folder and set permissions for those users and it all worked fine.
creator owner
iusr
network service
users
iis_usrs
I have a .Net 1.1 webapp.
I have a usercontrol (.ascx) that has links to 3 JS files in
script tags.
When I run the app and load a page with the usercontrol
all is fine and Firebug shows the js files listed.
But when I load another page that loads the usercontrol in a .aspx
in a new browser window Firebug reports 404 object not found
for the 3 JS files.
What could cause this??
Malcolm
You other .aspx page is in a different folder? Possible at a different level in the folder hierarchy? You need to adjust you JS file paths so that they are absolute paths.
You probably have the other page in a different location in the folder hierarchy. Perhaps reference you JS with a server side tag with a ~ in it.
So try changing your JS path to something like this:
<script type="text/javascript" src='<%=ResolveUrl("~/someFolder/functions.js")%>'></script>
Use a tool like Microsoft Fiddler to help you understand the issue.
You could try using a basepath in you pages. In that case each url/image/css/js reference in your website will be relative to the basepath. Using a basepath in your site will prevent big issues when moving files into/from folders.
I usually place the base tag into the master page.
<base href="<%=MyWebsite.Library.Configuration.BasePath%>" />
As you can see the basepath is requested from my configuration, but you can also use .NET code to dertermine the basepath.
Using this constructions saves me a lot of issues when developing my pages. Only problem is that Visual Studio does not completely known how to handle this which causes some warnings about incorrect CssClasses or links.