Question

0

81

Views

How to publish a react app in any directory?

I have a react app which I may want to run from different directories possibly on multiple hosts.

https://myhost.com/relative/path/1/index.html

https://myhost.com/relative/path/2/index.html

https://myhost2.com/relative/path/1/index.html

I notice when I click on a home link URL always shows

https://myhost.com/home instead of https://myhost.com/relative/path/1/home

Is this expected behavior?

<Link to={`${this.settings.getClientBaseUrl()}home`}>Home</Link>

<Route exact path={`${this.settings.getClientBaseUrl()}`} element={<HomePage parent={this.parent} />} />

I am looking for a definitive way or explanation on how to have the URL look like

https://myhost.com/relative/path/1/home

instead of

https://myhost.com/home

7 months ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-06-30T03:58:06.575Z

I managed to do this.

Base Url

let baseUrl = window.location.pathname;
baseUrl = \`${baseUrl.split('/').slice(0, -1).join('/')}/\`; // get dir of filepath

If you put the output of build in https://example.com/path/to/script baseUrl = '/path/to/script/';

Routes

<Route exact path={`${baseUrl}`} element={<HomePage props={props} />} />
<Route exact path={`${baseUrl}index.html`} element={<HomePage props={props} />} />
<Route exact path={`${baseUrl}home`} element={<HomePage props={props} />} />

Links

<Link to={`${baseUrl}home`}>Home</Link>

.htaccess goes into the same directory of the react index.html

# begin redirect to index.html
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule . index.html [L]
# end redirect to index.html