I've been trying to fix an error in my application for days and am hoping for some help. I am able to run my app perfectly fine on my localhost, but when pushed to Heroku (React FE Node BE) I am able to navigate around my site, but GET/POST requests do not work. All of my get requests return my index.html file, and all of my POST requests (logging in mainly) return a 405 error "not allowed".
My app is hosted here: https://www.testofstrength.app
The codebase is here: https://github.com/mgitto1/test-of-strength/tree/New (within the "New" branch specifically.
Help would be greatly appreciated
are you deploying both server and client on one dyno on heroku? you need different project structure...
server should be on root and client on separate folder
then in package.json of server in root you can have
"scripts": {
"heroku-postbuild": "npm run install-client && npm run build",
"install-client": "cd ../client && npm install",
"start": "node server.js",
}
Related
Why is that the react app I deployed via github pages is showing a blank page. I tried doing this already before (using the default react-homepage only for testing purposes) and it worked just fine.
"homepage": "https://aaroncferrer.github.io/banking-app",
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"gh-pages": "^5.0.0"
I was able to add/install the dependencies above as well.
This was my reference for deployment instructions: https://github.com/gitname/react-gh-pages#2-create-a-react-app
Repo link: https://github.com/aaroncferrer/banking-app
Additionally, I tried deploying the react app via vercel but it also gives me an error upon deployment/building phase:
Vercel Depoloyment Error
You should have the index.html file in the main root of your application and not in any other folder like public. Hope this resolves the issue
I have been working with nextjs for a little now and I have noticed that the backend side does not hot reload when I make changes to the API, is there a particular configuration to make hot reload happen also for the backend? I have searched around the internet and found nothing about this problem.
You have to use a library such as nodemon or pm2.
npm i -D nodemon
Then in your package.json add this script:
{
"scripts": {
"dev": "nodemon --watch pages --exec next dev"
}
}
I appreciate all of your help. I like how create-react-app allows you to run NPM RUN BUILD and then upload the "Build" folder to your FTP directory.
How is this possible with NextJS? I built my app and ran NPM RUN BUILD, but do not see a Build folder. I am using server-side rendering with getServerSideProps, so is there a web page that explains this? I read the Deployment web page on NextJS.org, but I do not want to use their servers.
Thank you again for your help.
Bruce
You need to setup a custom Node.js server if you don't want to use Vercel. Your package.json should contain these scripts:
{
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
}
From the docs:
next build builds the production application in the .next folder. After building, next start starts a Node.js server that supports hybrid pages, serving both statically generated and server-side rendered pages.
As you can see, you get .next instead of a build folder.
Backstory: I was originally going to switch to parcel v2, ran into a lot of issues, and really starting to dislike parcel. I managed to resolve some issues even though their error messages are very unintuitive. Got to a point that "parcel build" is working but "parcel serve" just doesn't, and can't find an answer online. At that point, I decided to switch to Create React App because it's more "industry" standard. (Thank you for listening to me rant.)
When I was using parcel v1, my setup for the dev environment is running "parcel index.html" (which has hot module replacement), and I'm serving the static files in my backend.
But I don't know how to do that with create-react-script. "react-scripts start" doesn't build to the "build" folder, "react-scripts build" only build once and no reload. I still want to serve the static file. What should I do?
If you're just doing this for development purposes, you could use a proxy from your backend server, pointing to the server run by the Create React App.
For example, with Fastify, you can serve your React app on 1234, and proxy to that from your server, with something like fastify-http-proxy:
const proxy = require('fastify-http-proxy');
// Normal routes here
fastify.register(proxy, { upstream: 'http://localhost:1234' });
fastify.listen(process.env.PORT, '0.0.0.0');
This is an Okta question. I just thought I post here since Okta's community is very small and they can take weeks to reply. I'm hoping someone here has experience with them... Or maybe it's not an okta question and it's more a react production build question. Does React build/ PROD limit the use of its modules when serving it as a static file through express?
I have deployed my app using express.js on the backend and react.js on the front-end. After I ran 'npm run build' and reference the build directory from Express, I was able to get my app to render the react components through the server-side.
The issue here is when making calls to the '#okta/okta-react' package such as okta.signIn(), I first got a 401 api/ Authentication error thinking it was a CORs or related problem. After further debugging, starting up client-side (npm start (dev), NOT npx serve(prod)), the okta.signIn() works.
Does the '#okta/okta-react' package not work in Production? Is it because I'm serving this as a static file through express? What is the solution here? Do i have to implement the okta server side instead, if so, whats the purpose of the react package?
Reason for using express:
True HTTPS server-side
Mailer Integration
Other Third-party integration
Client side package.json
"scripts": {
"start": "serve -s build -l 80",
"build": "node scripts/build.js",
"dev": "pm2 start scripts/start.js",
"test": "node scripts/test.js --env=jsdom"
},
"proxy": "http://localhost:443",
app.js Server
app.use(express.static(path.join(__dirname, 'client/build')));
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'client/build/index.html'))
})