How to change base url of create react app?

Question

I'm using react-router-dom with create-react-app.

Running scripts with yarn start, it starts with http://localhost:3000/(myprojectname), not http://localhost:3000/

When routing with react-router-dom, I have to remove myprojectname from url and then add page routes.

There seems to be a problem with the initial setting of the project,

how can I start from http://localhost:3000/ ??

Add package.json, router code.

package.json:

{
  "name": "cau-burger-online-order-system",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-router-dom": "^5.3.2",
    "@types/styled-components": "^5.1.16",
    "axios": "^0.24.0",
    "bootstrap": "^5.1.3",
    "brace-expansion": "^2.0.1",
    "gh-pages": "^3.2.3",
    "prettier": "^2.5.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "5.3.0",
    "react-scripts": "4.0.3",
    "styled-components": "^5.3.3",
    "typescript": "^4.1.2",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "homepage": "https://myprojectname"
}

App.tsx:

import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
import './App.css'

import { Route, BrowserRouter as Router, Switch } from 'react-router-dom'

import Detail from 'pages/detail/Detail'
import GlobalStyle from './GlobalStyle'
import Home from 'pages/home/Home'
import Login from 'pages/login'
import Signup from 'pages/signup'

function App() {
  return (
    <Router>
      <GlobalStyle />
      <div className="App">
        <div className="auth-wrapper">
          <Switch>
            <Route exact path="/" component={Login} />
            <Route path="/login" component={Login} />
            <Route path="/signup" component={Signup} />
            <Route path="/home" component={Home} />
            <Route path="/detail" component={Detail} />
          </Switch>
        </div>
      </div>
    </Router>
  )
}

export default App

Can you share your package.json file? You may just need to edit the homepage entry. Alternatively, if you plan on deploying the app into a nested directory on your server then you can specify a basename prop on the router. — Drew Reese
– Drew Reese, Commented Dec 10, 2021 at 3:31
@DrewReese Changing like this <Route exact path="./" component={Login} /> doesn't show any difference. — HnM97
– HnM97, Commented Dec 10, 2021 at 3:46
Does this answer your question? How should I configure create-react-app to serve app from subdirectory? — gavenkoa
– gavenkoa, Commented Oct 24, 2022 at 15:16

Drew Reese · Accepted Answer · 2021-12-10 03:58:01Z

20

In your package.json file change the homepage entry to a relative path, excluding any sub-domain/nested directory.

{
  "name": "cau-burger-online-order-system",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    ....
  },
  "scripts": {
    ...
  },
  ...,
  "homepage": "https://hy57in.github.io/2021-Industry-Hands-On-Project"
}

to

{
  "name": "cau-burger-online-order-system",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    ...
  },
  "scripts": {
    ...
  },
  ...,
  "homepage": "./"
}

answered Dec 10, 2021 at 3:58

Drew Reese

207k19 gold badges279 silver badges292 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Utkarsh verma · Accepted Answer · 2023-02-18 02:06:10Z

8

You just need to do two things for changing base Url for ReactRouterDom dom. It is useful when you host the website on website like github page and or at url something like Https://website.com/mywebsite or at sub link .

First - You have to add a attribute Like -

<BrowserRouter basename='/mywebsite'>

Or open your package.json and add Before building your project for production

"homepage": "/your-subdirectory",

for my case :

"homepage": "/mywebsite",

I hope this will help, Feel free to ask if you stuck in this .

answered Feb 18, 2023 at 2:06

Utkarsh verma

1691 silver badge2 bronze badges

Comments

manuel taveras · Accepted Answer · 2021-12-10 03:41:12Z

1

I found some helpful information on https://v5.reactrouter.com/web/api/Redirect "Rendering a will navigate to a new location. The new site will override the current location in the history stack like server-side redirects (HTTP 3xx) do."

Is there any way you can share your repository? I'll be the best way to help you. Pretty much, I need a little bit more information to help you.

answered Dec 10, 2021 at 3:41

manuel taveras

1111 gold badge1 silver badge4 bronze badges

Collectives™ on Stack Overflow

How to change base url of create react app?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related