I'm using v6 and vite.js and deploying the built app into a nested directory. Despite specifying the basename attribute in the BrowserRouter element, I'm finding the URLs don't work correctly unless coming in via the index.html. I can work around this with a .htaccess file but it seems like a bit of a hack. Can someone suggest a better alternative? Thanks!
Related
I would like to host multiple versions of a SPA on the same site. I would like to use initial load paths like this:
http://host/myapp/1.0.1
http://host/myapp/1.0.2
However, if my html uses relative paths like "css/myapp.css", then these resolve to:
http://host/myapp/css/myapp.css
I know why this is, and I know if I use trailing "/" on the initial page loads it will work correctly, but obviously it would nice to not have to tell people to use the "/" on the end.
I suppose I could have the app adjust the base path on load, but that complicates the app somewhat. I am using vue and the solution would need to work at runtime, not compile time since i don't know all the subfolders the immutable app will be loaded from.
Is there a cleaner way to support multiple version-folders this way and have relative paths work properly?
I am using react router v4. I noticed the same problem in v2 as well:
If I am at some route
/admin/details
and I do a page refresh, the root path of my app is changed to /admin. So any static assets loaded in index.html are missing because /admin is appended to the root path.
Same thing goes for api requests. If i want to make a relative API request from a nested route component, it breaks because rather than calling for example a get('data/images') it would doget('admin/data/images').
Any way around this? I've googled all day and nobody seems to run into this problem, the only answer is absolute paths for the requests.
I figured it out. I was calling my endpoint with a relative path ie I did
get('data/all') instead of get('/data/all') ...same thing with my scripts in the html. I just made them absolute and its all working. Sillyness.
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!
Ok, so the title tells very little of my issue.
Basically, I have a project written in node that does something. It's a website that uses express, jade and stylus. I have set up the routing for static content like this:
app.use(express.static('public'));
The website works fine and all the CSS loads properly if, in the HTML, I reference it like this (for example):
link(rel="stylesheet", href="global.css")
As expected, when I hover over the link in Chrome's element viewer, the URL is localhost/global.css
So now I've got a couple of these little project and I want to put them all together. They aren't related but I'd like to put them all on my website. For this I have made a new project that server like a hub for the other ones.
In it, I've setup routing like this:
var proj = require("../proj/server.js");
app.use("/proj ", proj);
and in each of the projects I have set the modules exports like this module.exports = app where app is their respective express app object.
This also worked like a charm. I didn't have to run a separate server instance on a separate port for each project. Instead, you can access them like localhost/proj/
Now here's where the issue starts. The CSS that is referenced in the generated HTML of each project doesn't point to localhost/proj/global.css. Instead it still points to localhost/global.css. And since there's no global.css in the public folder of my hub application, it doesn't find it.
I could, of course, just change the relative URLs to proj/global.css instead of just global.css and this does work, but it means that I need to modify all of my projects. It also means that I have one more string to change should I decide to change their names.
Besides, the URL already shows localhost/proj, so why can't it just be automatically implied that when I reference global.css it should be looked for in localhost/proj/global.css?
I'm sure there's some easy trick I'm missing. Maybe my relative URLs should have some extra stuff that says it refers to the current URL?
Edit:
It actually seems that the relative URLs work, but only if the address in the address bar is localhost/proj/. If it's localhost/proj it doesn't. What can I do to force that last slash?
I don't know if it can help you, but in express, you can define several "public" directories
router.use(express.static(path.resolve(__dirname, 'client')));
router.use(express.static(path.resolve(__dirname, 'public')));
router.use(express.static(path.resolve(__dirname, 'foo')));
I have an using ASP.NET MVC 4.5 that uses some css files.
The css refers to some images.
The css file Is located in this path:
WebSiteRoot\Content\css\services\File.CSS
The image is located in this path:
\WebSiteRoot\Content\img\servicesbubble\image.png
The css has this calling:
background:transparent url('../../img/servicesbubble/image.png') no-repeat 0px 0px;
When I run the app in the localhost it works. But when I upload to the hosting (Appharbor) It doesn't work.
Why? What is the best way to reffer to the root of an app?
In the server the http get is tried to this wrong URL
WebSite.com/img/servicesbubble/desktop.png
Update: I am using the .NET framework 4.5 feature called bundling for merge these CSS with another CSS.
Your problem is actually coming from the fact you're minifying the css to a different directory than the CSS originally existed in.
More specifically: http://tulpepwebsite.apphb.com/Content/css/servicescss?v=sdm08D5sRu2I00dA0phyVTYZ_QU8Nfp27wHtmmE0Gzk1
So ../../ puts you at http://tulpepwebsite.apphb.com/Content
Urls in CSS files are always relative to location of the CSS file itself.
Your paths to the CSS files seems to change. The two CSS files I see related to your website are http://tulpepwebsite.apphb.com/Content/css/servicescss?v=sdm08D5sRu2I00dA0phyVTYZ_QU8Nfp27wHtmmE0Gzk1 and http://tulpepwebsite.apphb.com/Content/GeneralCSS?v=9kvtUcooQua0D4nQT8wZ-4_Gm6OcRd-J5SkjMxwKiyQ1. (The other is from the google fonts service.) You need to figure out why that's happening.
Edit: Ok, I'm going to guess something. You're probably using the new ASP.NET 4.5 bundling feature. But it doesn't make sense to bundle CSS flies in different directories, if you're doing that.
Your CSS location is different than you think:
WebSiteRoot\Content\css\File.CSS
instead of
WebSiteRoot\Content\css\services\File.CSS