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
- ReactJS TypeError: Cannot read properties of undefined (reading 'map')
- React router-dom <Link> to pass multiple params and access them using useParams
- ReactJS is giving bad set state error in useMemo function
- How can I create a menu with my json info with REACT
- How to render multiple icons from a data component in a Card
- Error running npm command on Windows: graceful-fs
- Make React Query return previous data on error
- How to make the MUI Autocomplete read only?
- Disable/remove pagination from react material-table
- UPD: React doesn't return HTML elements from functions
- Retry react-query based on result
- Sort method and indexes
- this.props.children is not a function when trying to cluster markers from array using @react-google-maps
- How to return a list according to selected item?
- React: trying to add an onClick to a li tag but the click handler function is undefined
- How to use docx npm package in production to save a file
- Javascript immutable pop()?
- In React, how to trigger on change of all instances of a component when any of on change is triggered
- Uncaught TypeError: data.map is not a function on reactjs dummy component
- Call a material ui dialog
- Darken When Hover For Button in React
- Value of datetime-local with React
- Nextjs getInitialProps query.id is undefined
- Component not re-rendered after updating the state (mapStateToProps called)
- How to clean input fields after another operations in a function in React?
- Need help converting code for fabric canvas from Vanilla JS to ReactJS
- this.setState is not a function while I am trying to set a different state
- Navigation is not working in ReactJS web app
- Reactjs make reusable custom modal
- Putting wrapper components in react router switch