How should I configure create-react-app to serve app from subdirectory?

by

In addition to your requirements, I am adding mine:

  • It should be done by CD, through an env variable.
  • If I need to rename the subdirectory, I should only have to change the env variable.
  • It should work with react-router.
  • It should work with scss (sass) and html.
  • Everything should work normally in dev mode (npm start).

I also had to implement it in Angular2+ project not long ago, I found it harder to implement in React then in Angular2+ where you are good to go with ng build --base-href /<project_name>/. source

Short version

  1. Before building, set PUBLIC_URL env variable to the value of your subdirectory, let use /subdir for example. You can also put this variable into your .env.production (in case you do not have that file you can check the doc)
  2. In public/index.html add the base element bellow, this is for static files like images.
<base href="https://stackoverflow.com/questions/49429906/%PUBLIC_URL%/">
  1. Also in public/index.html, if you have custom link element, make sure theyre are prefixed with %PUBLIC_URL% (like manifest.json and favicon.ico href).
  2. If you use BrowserRouter, you can add basename prop: 
<BrowserRouter basename={process.env.PUBLIC_URL} />
  1. If you use Router instead, because you need access to history.push method, to programmatically change page, do the following:
// history.tsx
import {createBrowserHistory} from 'history';

export default createBrowserHistory({ basename: process.env.PUBLIC_URL });

<!-- Where your router is, for me, App.tsx -->
<Router history={history}>
  ...
</Router>
  1. Use relative links inside your elements
<!-- "./assets/quotes.png" is also ok, but "/assets/quotes.png" is not -->
<img src="https://stackoverflow.com/questions/49429906/assets/quotes.png" alt="" />
  1. Move your background-image links from scss to jsx/tsx files (note that you may not need to do that if you use css files):
/*remove that*/
background-image: url('/assets/background-form.jpg');

<section style={{backgroundImage: `url('assets/background-form.jpg')`}}>
...

You should be done.

Additional informations

I preferred to use PUBLIC_URL instead of homepage in package.json because I want to use env variable set on gitlab to set the subdir. Relevant resources about the subject:

PUBLIC_URL override homepage, and PUBLIC_URL also take the domain name, if you provide one. If you set only homepage, PUBLIC_URL will be set to the value of homepage.

If you do not want to use a base element in your index.html (I would not know why), you will need to append process.env.PUBLIC_URL to every link yourself. Note that if you have react-router with a base element, but have not set basename prop, you will get a warning.

Sass won’t compile with an incorrect relative path. It also won’t compile with correct relative path to your ../public/assets folder, because of ModuleScopePlugin restrictions, you can avoid the restriction by moving your image inside the src folder, I haven’t tried that.

There seem to be no way of testing relative path in development mode (npm start). see comment

Finnaly, theses stackoverflow link have related issues:

More Related Contents:

  1. Error: ‘node-sass’ version 5.0.0 is incompatible with ^4.0.0
  2. combine react build output into single js file
  3. How to set build .env variables when running create-react-app build script?
  4. Create-React-App build – “Uncaught SyntaxError: Unexpected token
  5. Dynamically import images from a directory using webpack
  6. Why am I getting ReferenceError: self is not defined when I import a client-side library?
  7. How do I hide API key in create-react-app?
  8. Template not provided using create-react-app
  9. Support for the experimental syntax ‘classProperties’ isn’t currently enabled
  10. Dynamically Add Images React Webpack
  11. Line 0: Parsing error: Cannot read property ‘map’ of undefined
  12. How to import and export components using React + ES6 + webpack?
  13. Use custom build output folder when using create-react-app
  14. Remove console.logs with Webpack & Uglify
  15. How to tell webpack dev server to serve index.html for any route
  16. deploying create-react-app to heroku with express backend returns invalid host header in browser
  17. React Js require ‘fs’
  18. How to use Google fonts in React.js?
  19. Value of “this” is incorrect when debugging Babel transpiled React with Chrome Devtools
  20. Using `”homepage”` in package.json, without messing up paths for localhost
  21. webpack can’t find module if file named jsx
  22. ‘TypeError [ERR_INVALID_ARG_TYPE]: The “path” argument must be of type string. Received type undefined’
  23. How to hash CSS class names in Nextjs?
  24. Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema
  25. Relative path in index.html after build
  26. How to minimize the size of webpack’s bundle?
  27. How to bundle a React app to a subdirectory on a server?
  28. google is not defined in react app using create-react-app
  29. create react app not picking up .env files?
  30. Preset files are not allowed to export objects

Leave a Comment