I'm working on a project using express.js and create-react-app.
The basic structure of the project is:
/.
|-- express-backend(:3001)
|---|---react-frontend:(:3000)
The express backend is serving on the port 3001 while the frontend is serving on the 3000. I don't have any problem in making this work, since I'm redirecting backend requests using proxy in the package.json
"proxy": "http://localhost:3001"
The only problem comes when I'm trying to redirect the user on a login page using app.use("/login", login).
I'd like to redirect users to a login.ejs page when he is on the url localhost:3000/login.
I'm only able to visualize the page when I visit localhost:3001/login.
How can I redirect the user to the static page login.ejs when he is on localhost:3000/login?
(I'm new on express, if you can give me an explanation with the answer I'd be very grateful)
app.use("/login", function(req,res){
res.redirect("login");
});
Now this login.ejs page should be available public folder which is accessible to user.
Related
I've deployed an server-side rendering React app (bundled without CRA):
it has an express server for server-side rendering (listens to port 3000 or process.env.PORT)
it has an express server for the API that serves the frontend (listens to port 8080 or process.env.PORT)
On localhost, the frontend makes a request to http://localhost:8080/api to get the data, which works perfectly.
From my understanding, when the app is in production, the base API URL should be the app's URL (eg. https://myapp.herokuapp.com) instead of http://localhost:8080, so I added this change in my code:
if the app is in dev, the frontend calls http://localhost:8080/api
if the app is in prod, the frontend calls https://myapp.herokuapp.com/api(I added https://myapp.herokuapp.com/as a config var in Heroku)
However, it doesn't work. My app is deployed successfully to Heroku and the SSR renders correctly, but the API call fails. (I also tried https://myapp.herokuapp.com/api:3000 which fails)
What should be the API URL to call a local server when the app is in production?
thanks a lot!
Well, as far as I know Heroku doesn't allow multiple ports and you will not be able to open 3000 for web and 8080 for api.
You can serve both on the same port and route /api to the api.
I have worked on a project that uses similar approach and below is the code:
app.use('/api', router); // every api route is in the router
app.use(express.static(staticDir));
It is also deployed to heroku.
full repo if you wish to take a look - https://github.com/berkeli/breteau-dashboard/blob/main/server/utils/createServer.js
I wanted to deploy a react application which is a simple auth0 login page and on localhost:3000, eveything works fine, I can click the login button and everything works, it sends me to the auth0 login page.
Here is the part im stuck at:
When I push to Github and deploy to netlify and try to open it using the link netlify gave me, I click the login button and I get this in the URL bar: https://undefined/authorize?redirect_uri=
I have checked both the .env file in the app and on Netlify in the environments section and everything has the proper env variables. here is where I am testing it: https://reactjssample-324hz.netlify.app/
Here are the URIs I have setup:
Allowed Callback URLs:
http://localhost:3000,https://reactjssample-324hz.netlify.app
Allowed Logout URLs:
http://localhost:3000,https://reactjssample-324hz.netlify.app
Allowed Web Origins:
http://localhost:3000,https://reactjssample-324hz.netlify.app
Please tell me if I need to include anything such as code snippets.
EDIT: 06/01/2022
I have added the domain and clientID to the index.js file but now I am getting this when I click the login button:
Netlify 404 page not found although I have this in the URL bar now: https://tubular-klepon-a1d5fc.netlify.app/authorize?client_id= which I assume is better than what I had before.
EDIT: 06/02/2022
Here are the endpoint settings I have for my application
endpoint settings
Thanks
324hz
win1H2
he/him
Look like you have not configured the YOUR_DOMAIN in the application. Let try to configure it with value reactjssample-324hz.netlify.app
And do not forget to configure the customer domain reactjssample-324hz.netlify.app in Auth0 platform.
configure YOUR_DOMAIN
Hope it can help.
I have a PERN stack app using auth0 for login that is working fine on localhost but when deployed to heroku after I click to sign in I get a 404 on the callback.
The URL is exactly the same except for appname instead of localhost on all routes, i have also the env variables and callback and logout urls setup in auth0 correctly.
Is there anyone who has run into this and can help me solve this problem? Thanks.
check your port. I thought my port was 3000 (I'm using Next.js on Heroku with Auth0), but it actually isn't running on 3000, but whatever Heroku decides. I changed my auth0 Allowed Callback URLs and all is working!
I've created a website using create-react-app and react router. I am able to load the website from https://www.example.com/reactapp but I get a 404 error when I try to access a page like https://www.example.com/reactapp/somePage
The website is running on port 8080, https connection is working, inside my package.json I've defined my homepage as: "https://example.net/reactapp". In my BrowserRouter I've defined my basename as "/reactapp" and links are working and loading the pages just fine.
The thing also is that https://example.net/ displays a wordpress website, when I try to access https://www.example.net/reactapp/somePage I get a 404 error from the wordpress website. How can I properly fetch data when calling for a specific page?
Redirect all requests coming to the server to index.html
I uploaded the export directory of a Svelte app using Sapper to example.com. In the /routes directory I created a page called foo.svelte. When I click on a link in the app that forwards me to /foo, I see that page, both locally and on example.com.
But when I go to example.com/foo directly in the browser, I get a 404. Understandable, because nothing is hosted on that address.
So what do I need to change on example.com so that the routing works not just from within the app, but also by typing in the URL directly in the address bar of the browser?
The site runs on Apache and I have Plesk as management tool.