How to upload a create-react-app project to a subdirectory on a neuron

When running the build script for a create react app, it generates a single .html file where all the server request needs to be redirected, a static folder containing javascript and other imported assets (such as css and images) and all files and folders in your public directory. By default, when building, it assumes you will be deploying to the root of a webpage and when deploying to a subdirectory some things need to be set up in your code and your operating neuron.

App Setup

Static content

Static content in react create app is all the content which is imported in your actual code, things such as javascript, images and css (not assets in your public folder which are used with a href or src). For these to be properly linked. By linking I mean to make sure react gets the correct urls to query for the resources, to do this you need to set “homepage”: “/subdirectory/” in your package.json, however, you could instead set it to “.” . This makes sure that all paths are relative to index.html insted.

Public folder

To fix assets imported with a url you need to add <base href=”%PUBLIC_URL%”/> to your index.html then in your environment variables add PUBLIC_URL=’/path/to/subdirectory’. Finally make every such url is relative (they will be relative to the PUBLIC_URL) ex: <img src=”./images/test.png”>

React Router Dom

If your app uses react-router-dom, you need to specify base path in your BrowserRouter. Specifically, you need the base path attribute set to whatever subdirectory you are deploying to, or just the PUBLIC_URL environment variable. Here is an example: <BrowserRouter basepath={process.env.PUBLIC_URL} > … </BrowserRouter>

Quick Build Tip

To make development or deployment easier, set your projects BUILD_PATH environment variable to the correct folder/subdirectory in the neurons Root folder.

Neuron Setup

Vanity Resources

First of all, you need to redirect all request made to ‘/sub/directory/{path}’ to ‘/sub/directory/index.html’, this is because if a user clicks a link wich redirects to any other folder than index.html, even though it is defined in the browser router, it will return a 404 since the neuron does not know any such folder, it is the index.html folder which programmatically (with the browser router) determine which “page” to render. To fix this you need to add this vanity resource to your gateway.config folder: <VanityResource regex=”\/{SUB_DIRECTORY}\/[^\.]*?(\?.*$|$)” url=”/{DIRECTORY_IN_ROOT}/index.html”/>. Note that this only redirects all requests without a file extension to the index.html (not any .png or .extention). This is because any assets in the public directory need to be available when requested. If you are familiar with regex, the extra fuff in the expression is to pass request such as “/subdirectory/example_page?test=uri.data” to be passed to index.html.

#neuron, #react, #tutorial