Create-react-app: Relative paths in build output

[vgrigoriu]

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]

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

[xieqingtian]

awesome

[gaearon]

0.2.0 alpha is on npm, please give it a try and report any issues. https://github.com/facebookincubator/create-react-app/pull/190

[vgrigoriu]

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]

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]

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]

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]

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]

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]

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

[vgrigoriu]

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]

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

[vgrigoriu]

Yes, it works.

În vin., 29 iul. 2016 la 4:24 p.m. Dan Abramov [email protected] 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
https://github.com/facebookincubator/create-react-app/issues/165#issuecomment-236179213,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAF10GW7XtihILfmbaONqzDtvqfSC_eTks5qaf8kgaJpZM4JTx7M
.

[robcaldecott]

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]

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]

@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]

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: https://github.com/facebookincubator/create-react-app/issues/165#issuecomment-242430118.

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

[camwest]

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

[Timer]

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!

[buglessir]

@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]

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.