React-redux-starter-kit: Deploy to a sub folder

Created on 11 Apr 2016 · 5Comments · Source: davezuko/react-redux-starter-kit

This question relates to #631.

I'd like to deploy my react app to a sub-directory (e.g. kittens.com/myreactapp):

What do I need to change in order to make it work?
Should I change all the routes in my react-router so that they match my sub-directory (e.g. myreactapp) or there's another way?

Source

marcelloromanelli

Most helpful comment

Having the same issue, I want to deploy to /~lr039/test/. In _base.js I replaced the initial __BASENAME__ with:
'__BASENAME__' : JSON.stringify('/~lr039/test')
But as @marcelloromanelli wrote: All references in index.html point to the server root ex. www.bla.com/app.4eaa199188cce4ae39b5.js instead of www.bla.com/~lr039/test/app.4eaa199188cce4ae39b5.js

What am I missing? @davezuko what is the "template file"?

Thanks!

levin-roski on 21 Apr 2016

👍2

All 5 comments

@marcelloromanelli you need to set the __BASENAME__ in https://github.com/davezuko/react-redux-starter-kit/blob/master/config/_base.js#L81
That global plugs into https://github.com/davezuko/react-redux-starter-kit/blob/master/src/main.js#L12 for the magic

adrianObel on 11 Apr 2016

Exactly what @adrianObel mentioned above ^^ (thanks). You could also add a <base href='/myreactapp' /> tag to your template file as well, they will achieve the same thing (though you should pick one or the other). If you are still having issues I suggest possibly taking a look at the react-router or history docs, since I know I've seen a few issues with similar questions.

Closing as resolved, there's not much more to say for this in regard to this repo. If you are still having troubles just ping me on here and we can re-open if needed. Thanks!

davezuko on 12 Apr 2016

Great tips. Thank you @adrianObel and @davezuko

marcelloromanelli on 12 Apr 2016

I just noticed that all the files injected by webpack are starting at the root and not at what's being specified in the _BASENAME_. Am I missing something?

See an example code below.

<!doctype html>
<html lang="de">

<head>
    <title>tutti.ch</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <link href="/app.5d13f3a6c5662eccd6dfe141516811f4.css" rel="stylesheet">
</head>

<body>
    <div id="root" style="height: 100%"></div>
    <script src="/vendor.cd26f908e84414b0bae5.js"></script>
    <script src="/app.4eaa199188cce4ae39b5.js"></script>
</body>

</html>

marcelloromanelli on 12 Apr 2016

👍2

What am I missing? @davezuko what is the "template file"?

Thanks!

levin-roski on 21 Apr 2016

👍2

Was this page helpful?

0 / 5 - 0 ratings