Home page path ignored by github & heroku

1

I have two apps that I have deployed, one to heroku and one to github. they both have path issues.

both apps are React applications

HEROKU APP:

when the user want to get directly to some page in the app, for example: " /path/username" . he gets this error : Cannot GET /path/username

but when he press link button <a href = "/path/username">User Name</a> from home page, he will get to the requested page, after refresh he will get the error again - the path hasn’t changed.

package.json: 
"homepage": "https://appname. herokuapp.com" 
manifest.json: 
"start_url": "."

GITHUB PAGES APP:

when the user wants want to get directly to page in the app, for example: “/appname/path”

he gets this error : 404 File not found and the path changed, instead of " /appname/path" he will get to the path “/path” - removes the app name

package.json:
"homepage": "https://username. github.io/appname" 
manifest.json:
"start_url": "."

how can i solve it?

2

spaces are a killer mate, it should work if ya close the space after the dot, on both sites

3

the space is only because the forum wont allow new users to sent more than 2 urls… in the real code there is no space

4

ok your gonna have to send some more code for use to see whats going on, or put some on codepen otherwise this could mean anything

5

git hub app:

const App = () => {
  return (
    <Router>
      <div className="App">
        <Header/>
            <Route path = '/path' component = { PathPage }/>
            <Route path = '/' component = { HomePage }/>
        <Footer/>
      </div>
    </Router>
  );
}

package.json

{
  "name": "name",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@glidejs/glide": "^3.4.1",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "node-sass": "^4.13.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy": "gh-pages -d build"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "gh-pages": "^2.2.0"
  },
  "homepage": "https://username.github.io/appname"
}

menifest.json

{
  "short_name": "name",
  "name": "name",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
}

heroku app:

const App = () => {
  return (
    <Router>
      <div className="App">
        <Header/>
        <Switch>
          <Route path = '/path/:username' component = { PathPage }/>
          <Route path = '/' component = { HomePage }/>
        </Switch>
      </div>
    </Router>
  );

frontend package.json

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://appname.herokuapp.com",
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "axios": "^0.19.2",
    "express-generator": "^4.16.1",
    "highcharts": "^8.0.4",
    "highcharts-react-official": "^3.0.0",
    "node-sass": "^4.14.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

manifest.json

{
  "short_name": "name",
  "name": "name",
  "start_url": ".",
}

backend server.js


if (process.env.NODE_ENV === 'production') {
  app.use(express.static(path.join(__dirname, 'frontend/build')));
}


if (process.env.NODE_ENV !== 'production') {
  const corsOptions = {
    origin: 'http://localhost:3000',
    credentials: true
  };
  app.use(cors(corsOptions));
}

any suggestions ?

EDIT:
NOW WHEN I ADDED

  app.get('*', (req, res) => {
    res.sendfile(path.resolve(__dirname, 'frontend/build/index.html'));
  });

TO THE BACK END, THE WEBSITE IGNORES ALL BACKEND API REQUESTS

7

gonna be hard to figgure this out without a test environment mate, where is the front end connecting to the back end?

8