Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Relative paths in build output #165

Closed
vgrigoriu opened this issue Jul 25, 2016 · 21 comments
Closed

Relative paths in build output #165

vgrigoriu opened this issue Jul 25, 2016 · 21 comments
Milestone

Comments

@vgrigoriu
Copy link

Currently in the built index html, the js & css paths are absolute:

<script type="text/javascript" src="/main.bb7fdae8a3a384b182b2.js">

Is there a way to make them relative? I would like to host the app in a path below root.

@vgrigoriu
Copy link
Author

Looks like this is a duplicate of #94. I guess I'll just need to wait for a new version on npm.

@xieqingtian
Copy link

awesome

@gaearon
Copy link
Contributor

gaearon commented Jul 27, 2016

0.2.0 alpha is on npm, please give it a try and report any issues. #190

@vgrigoriu
Copy link
Author

I had to set homepage to ./ to get relative paths. I don't know if it's 'right' but it works for me, so thanks!

@gaearon
Copy link
Contributor

gaearon commented Jul 28, 2016

Hmm, can you describe your use case for purely relative paths? They won't work with client side routing. Is your app served from different paths?

@gaearon
Copy link
Contributor

gaearon commented Jul 28, 2016

To be clear, if you set homepage to mysite.com/myfolder, you will get absolute paths that start with /myfolder. Would that not solve your problem?

@insin
Copy link
Contributor

insin commented Jul 28, 2016

If you honour the value of homepage when it's present but blank, a blank publicPath will let you build apps which can be served from any URL, root or not.

You'll have to use hash-based routing if you need routing, that's the trade-off.

@gaearon
Copy link
Contributor

gaearon commented Jul 28, 2016

We currently don’t honor blank homepage: https://github.com/facebookincubator/create-react-app/blob/ca7d227ae0354e04941ba0e4f76c0bcbf3050dfa/config/webpack.config.prod.js#L20-L23. But we can, I guess. I’d like to hear more about the use case though.

@insin
Copy link
Contributor

insin commented Jul 28, 2016

Serving at any URL without being tied to a specific one and being able to build apps which don't need a server, just open the .html file in a browser.

I've found the latter handy for sending people little prototypes and tools at work instead of having to keep it serving from my machine or deploying it to our sandbox thing.

@gaearon
Copy link
Contributor

gaearon commented Jul 28, 2016

I think "homepage": "./" would do the trick. It’s kinda weird of course.

@vgrigoriu
Copy link
Author

My use case is similar to @insin's: I want to be able to host the files at any URL. I kinda prefer "homepage": "./" because it seems more explicit than "homepage": "".

@gaearon
Copy link
Contributor

gaearon commented Jul 29, 2016

@vgrigoriu It should already work I think, did you have a chance to check it?

@vgrigoriu
Copy link
Author

Yes, it works.

În vin., 29 iul. 2016 la 4:24 p.m. Dan Abramov notifications@github.com a
scris:

@vgrigoriu https://github.com/vgrigoriu It should already work I think,
did you have a chance to check it?


You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
#165 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAF10GW7XtihILfmbaONqzDtvqfSC_eTks5qaf8kgaJpZM4JTx7M
.

@robcaldecott
Copy link

We have the same requirement for relative paths but using a homepage of ./ breaks image URLs in CSS (it ends up looking for the image in a static folder within the css folder when it is actually a level above). This is simple to reproduce if required.

We are desperate for a way to use relative paths. If anyone has any ideas I would be very grateful. At least a way to have 3rd-party CSS unmolested by Webpack when creating a production build.

@gaearon
Copy link
Contributor

gaearon commented Aug 25, 2016

If you can figure out a way to fix

using a homepage of ./ breaks image URLs in CSS (it ends up looking for the image in a static folder within the css folder when it is actually a level above)

please send a PR!

This probably won’t be a high priority for us so we’d need somebody who cares about this to solve this.

@camwest
Copy link

camwest commented Nov 8, 2016

@gaearon our use-case for relative paths are that we deploy the build folder to s3 using jenkins for every pull request (we call this our 'snapshot' build). The URL is generated based on the jenkins build tag so it looks something like: s3.amazonaws.com/my-bucket/jenkins-pr-1/index.html

Seeing homepage: "./" works great but I don't agree with your characterization as "weird" 😄

@gaearon
Copy link
Contributor

gaearon commented Nov 8, 2016

Seeing homepage: "./" works great but I don't agree with your characterization as "weird"

I don't mean the use case is weird, I meant that this "solution" is weird. And as noted above, it breaks in some cases so I don't recommend it at all: #165 (comment).

We plan a different solution for your use case in #937.

@camwest
Copy link

camwest commented Nov 8, 2016

@gaearon got it. I wanted to make sure you were aware of our use case!

@Timer
Copy link
Contributor

Timer commented Feb 11, 2017

Hi there! react-scripts v0.9.0 was just released which adds support for building for relative paths. You may read how to do so here.

Please test it and don't hesitate to reach out if this doesn't solve your specific use case!

@Timer Timer added this to the 0.9.0 milestone Feb 11, 2017
samiwel added a commit to ONSdigital/eq-author that referenced this issue Apr 10, 2017
samiwel added a commit to ONSdigital/eq-author that referenced this issue Apr 11, 2017
@buglessir
Copy link

buglessir commented Dec 22, 2017

@gaearon Yes, i have this problem too !
For solve this problem , after build the app you must edit index.html source and change css or js bundle path from '/' to './'
This way is just for checking built app in local computer, but if you upload this app , you have not problem and this will work good !!!

@prakharrke
Copy link

I don't know if this thread is still active, but if it is I would like to add a scenario where relative path in built index.html is required.
Say, I have to publish my react UI on tomcat server using maven webapp project.
Let's call my maven webapp project as testProject.
Launching that project on tomcat would be like "http://localhost:8080/testProject".
This will run my index file.
The rest of the files that index file links should have a relative path of ./manifest.json and so on.
But what currently happens is, it tries to send GET request to files as "http://localhost:8080/static/css/somefile.css", which is wrong.
If there is a solution to this, please let me know.
Also, I read in one of the github posts that using "homepage" : "." is not advised as of yet as it is not completely implemented.

@lock lock bot locked and limited conversation to collaborators Jan 8, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

9 participants