• We will use Netlify to host the frontend and Render to host the backend.
• First create a Github repository and push your data to that repository.
• In my case , I had a backend folder with all the backend div,a build folder (that was build using the frontend folder)
and the package.json and package-lock.json files in the root directory.
For backend-
In Render, got to New>Web Services , and follow commands.
1.upload backend to render, build command - npm install , start command - npm run dev ("nodemon backend/server.js")
2.change mongodb url to online atlas
3.add env variables to render
For frontend-
4. run- npm run build in vs div in frontend
5. upload build to netlify
6. create netlify.toml in build folder - to redirect routes from frontend to backend.
[[redirects]]
from = "/api/*"
to = "https://buybud.onrender.com/api/:splat" //get this from render
status = 200
7.now if you open production deploy it will work just fine, but if you refresh the page you get error - "page not found"
why-
The issue you're experiencing with a "Page Not Found" error when refreshing a page on Netlify might be related to client-side routing
and how your application handles page refreshes.
When you deploy a frontend application to Netlify (or any other static site hosting service), it relies on client-side routing to
handle navigation within the app. This means that when you navigate between pages, JavaScript on the client side manipulates the URL
and updates the content dynamically without triggering a full page reload.
However, when you refresh the page, the browser sends a request to the server for the specified URL. In a single-page application
(SPA) with client-side routing, the server might not recognize the route because the server is not aware of the client-side routes
defined in your frontend application.
To fix this issue, consider the following solutions:
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
This configuration redirects all requests to your index.html and ensures that your client-side routing takes over.