score:6
You can override the homepage setting using you dev shell environment:
$ export PUBLIC_URL=http://localhost:3000/
$ yarn start
or if you prefer, remove your homepage setting and configure your env before building for production:
$ export PUBLIC_URL=http://example.com/subdir
$ yarn build
score:8
For people coming here looking for an all-in-one answer which also covers react-router-dom:
Add
package.json['homepage']
to be your production url. To be noted, the CRA build step removes the domain part of the url to leave only the path to index.When building for localhost, do
PUBLIC_URL=/ npm run build
Add
<base href="%PUBLIC_URL%" />
in yourpublic/index.html
page as proposed in this article ; it will provide support for assets (img, css) and will expose the%PUBLIC_URL%
to be reused later.In the component which creates your BrowserRouter (typically App.js or main.js), add:
const basename = document.querySelector('base')?.getAttribute('href') ?? '/'
use as:
<BrowserRouter basename={basename} />
score:47
You can use PUBLIC_URL
environment variable to override the homepage for a specific build.
Even better have it set in your package.json, for instance:
{
// ...
"scripts": {
"build": "react-scripts build",
"build-localhost": "PUBLIC_URL=/ react-scripts build"
// ...
}
// ...
}
score:100
Docs for create-react-app
explains how to serve same build from different relative paths.
If you put homepage as
"homepage": ".",
assets will be served relative to index.html
. You will then be able to move your app from http://mywebsite.com
to http://mywebsite.com/relativepath
or even http://mywebsite.com/relative/path
without having to rebuild it.
For development purposes, serving using yarn start
or npm start
is good enough. App will be available in localhost
Source: stackoverflow.com
Related Query
- Using `"homepage"` in package.json, without messing up paths for localhost
- How to override styles for material-ui TextField component without using the MUIThemeProvider?
- How to fix 'module not found' for audio files using file-loader? Images, CSS, and JSON are working just fine
- create "TouchableOpacity" for ReactJS without using react-native-web
- Sanitize HTML String without using dangerouslySetInnerHTML for length check
- How to use a npm package for development without building it every time?
- Programmatically navigate using react router without duplicating paths
- JSON object vs window variable for passing server-side rendered initial state using reactjs
- How to bundle module without dependencies for publishing npm package
- How to set the package.json for deployment without using create-react-app and only using my own Webpack?
- Using Material-UI for Reactjs without Node.js/NPM
- JSON missing a template for this request format and variant coming from React using Stripe
- Creating an Alias for an NPM Package in Gatsby Using the Root Import Plugin
- How can I check a function for having arguments without checking their values, using jest & enzyme in react component?
- Unable to import module when using alias in package json
- Python Dash without using external URLs for js
- state management for complex json using hooks
- Using webpack as build tool for React npm package
- Why am I getting 401 for authorization request when authorize with OAuth2 Server sent from localhost but works fine using Postman
- Using FullCalendar on React without Jquery UI Draggable for external drag drop
- Debouncing / throttling a callback in React using hooks without waiting for the user to stop typing to get the update
- Is it possible to get values for <options> from an endpoint that sends back json response using axios?
- Using @html.React() in a .cshtml razor view for a component that's inside an npm package
- Issue using array of objects from API as JSON for d3 visualization
- What is the correct syntax inside the src property in a img tag for a mapped json file using ReactJS?
- Algorithmic problem solution without using for loop
- How do I set a value for a <select> with React without using onChange?
- Using video-react package for video, when we initially seek the player not working properly in safari?
- How to iterate over json response without using jsx in reactjs?
- Use your local types for an npm package without publishing it to @types
More Query from same tag
- RxJS: Queue the first source until the second source meet the predicate
- How do I find out what CSS is determining the dimensions of my React header component?
- React suggestions Input setting state
- Is it possible to set up material-ui AppBar/ToolBar to have a horizontal tab menu layout?
- In Redux, how to get user input
- How to have Nginx to proxy pass only on "/" location and serve index.html on the rest
- How to change the style of a single component within an other component with styled-components?
- Can I use useSelector() to return a deeper nested property/value of state?
- React router path issue
- Put function that returns promise in redux state
- total sum of nested object value in array
- React pass component as react
- How to get object values as type in typescript?
- Getting error 405 upon submitting a delete request with axio
- fetch function doesn't called with react-redux
- React.js className value with string interpolation
- how to convert my code to a sharable component
- Member functions with react hooks
- css React onclick show component
- Loading dependencies with or without react
- WithStyles injected props type
- Selecting Multiple options in Reactjs
- Typescript: How to add type check for history object in React?
- React router changes url but not loading view
- React parent access state from child
- React change variable onChange-method
- API request error - No 'Access-Control-Allow-Origin' header is present on the requested resource
- Template literal for object identifier
- Map multiple arrays at the same time javascript/reactjs
- Augment types for imported module in TypeScript