Cant access the site with url end: /favorites, able only if accessing the beggining of the url first

[tal_moshel]

Dear Team,

This is a vite react App. https://weatherapp3-gem8.onrender.com/

I get 404 when I tried to access the /favorites ending url, directly from a new Tab.

I checked in the browser and I didn’t got any html file in the network field.

I added to my packege.json a “start”: “http-server dist -s”,

my package.json:

{
“name”: “weatherapp”,
“private”: true,
“version”: “0.0.0”,
“type”: “module”,
“scripts”: {
“dev”: “vite”,
“build”: “yarn install && vite build”,
“start”: “http-server dist -s”,
“lint”: “eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0”,
“preview”: “vite preview”
},
“dependencies”: {
“@babel/core”: “^7.24.5”,
“@reduxjs/toolkit”: “^1.9.7”,
“dotenv”: “^16.3.1”,
“react”: “^18.2.0”,
“react-dom”: “^18.2.0”,
“react-icons”: “^5.2.1”,
“react-is”: “^18.3.1”,
“react-redux”: “^8.1.3”,
“react-router-dom”: “^6.20.1”,
“styled-components”: “^6.1.1”
},
“devDependencies”: {
“@types/react”: “^18.2.37”,
“@types/react-dom”: “^18.2.15”,
“@vitejs/plugin-react”: “^4.2.0”,
“eslint”: “^8.53.0”,
“eslint-plugin-react”: “^7.33.2”,
“eslint-plugin-react-hooks”: “^4.6.0”,
“eslint-plugin-react-refresh”: “^0.4.4”,
“http-server”: “^14.1.1”,
“vite”: “^5.0.0”
},
“resolutions”: {
“styled-components”: “^5”
}
}

---

my render.yaml
services:

• type: web
  name: weatherapp
  env: node
  plan: free
  buildCommand: yarn install && yarn build
  startCommand: yarn start
  staticPublishPath: dist
  routes:
  • type: rewrite
    source: /favorites
    destination: /index.html
  • type: rewrite
    source: /.*
    destination: /index.html

---

I did ‘yarn build’ before the deployement

---

i checked in my index.html if I can access both src and href ur and I can:

<script type="module" crossorigin src="./assets/index-Dm8JhGJ5.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-BoObjiJv.css">

---

Please see attachments

BR, Tal

[tal_moshel]

Dear Team,

I prefer this site to be a Web Service since is fetching data from an API.

I understand that I need to remove staticPublishPath: dist, and that If a resource is realted to a route like /favorites , the user should be able to see page, and no redirect/ rewrites are possible (Please see attached).

Than I don’t understand why I see 404 when I directly access the /favorites.

Please help,

BR, Tal

[al_ps]

Hi,

This looks like a continuation of your previous topic(s). I don’t think these all needed new ones.

Your screenshot shows the docs of redirects/rewrites, which are only available on Render Static Sites. If you want to use a Web Service those docs wouldn’t be relevant.

If your project is just a React app, then a Static Site is usually the best place to deploy it, as per our guide: https://docs.render.com/deploy-create-react-app

If your React App uses client-side routing (e.g. React Router) you will need a rewrite when deploying to a Static Site, also covered in the guide above: https://docs.render.com/deploy-create-react-app#using-client-side-routing. Not for each route, just a catch-all /*.

If you want to use a Web Service you’ll need an HTTP server, e.g. Express, to serve the production-built React App files. You would then need to consider the same “rewrite” behavior in your code to handle client-side routing. This is covered in React own deployments docs: https://create-react-app.dev/docs/deployment/#other-solutions

[tal_moshel]

You are right, I failed to find the other topic so I opened it. sorry.

Im using react router dom.

I change the rule to rewrite, I see in the consoloe:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “binary/octet-stream”. Strict MIME type checking is enforced for module scripts per HTML spec.

[al_ps]

“binary/octet-stream” will likely be you referencing a file the browser doesn’t support/expect.

We often see this is you’re referencing JSX files in your HTML. They are not directly accessible by the browser. Would need to transpile/build your static files for production, as shown in our React app deployment guide https://docs.render.com/deploy-create-react-app