NextJS hot reload does not work for the backend - reactjs

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"
}
}

Related

React App on Heroku responds to all requests with index.html

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",
}

NextJS, how to upload a server-side rendered application to my FTP account

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.

Getting a blank page after after deploying reactjs app to github pages

Hi I'm trying to deploy my reactjs app to GitHub pages but I keep getting a blank page
here are the steps I followed
Pushing project to empty repo: https://github.com/DroidBarber/dolla
installing gh-pages: npm install gh-pages --save-dev
modifying package.json :
{
"homepage": "https://DroidBarber.github.io/dolla/",
},
scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
},
deploying npm run deploy
but I'm getting a blank page app runs fine in local host...
Help...
You are deploying your application to an additional path: /dolla/.
So when your deployed react application run on: https://DroidBarber.github.io/dolla/ it tries to get resources from /dolla/ which is not defined in your routing.
It will be similar when you run on your local at http://localhost:3000/dolla
Try to change your homepage in webpack to: "homepage": "https://DroidBarber.github.io/".
GitHub Pages doesn't support the pushState history API (which react-router-dom's BrowserRouter uses under the hood). You'll need to switch to HashRouter instead. You can read more about it here

why github pages not rendering my site, React

I have created a site with react, redux, and firebase as a backend and pushed it to git but when I'm tired to create a GitHub page to the site it builds Succesful and uploaded the files to the gh-pages, but when I'm entring the link it doesn't render the site
my repo : https://github.com/alon4551/Crown-Market
my site : https://alon4551.github.io/Crown-Market/
I've also installed the gh-pages in my project and add this lines in my package json
and runed the command npm run deploy
"homepage": "https://github.io/alon4551/Crown-Market",
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build"}
can someone help me
The home page should be set up this way:
"homepage": "https://myusername.github.io/my-app"
for a more detailed explanation, Create-React-App Deployment Guide

Auto reload react server on update

I'm new to React. I'm having some problems with react server. After starting the server by npm start if I work on the source code and make some changes, I have to stop the server and restart it to make that change available on the browser. Is there anyway to make it auto compile and refresh the browser on update ? (Like nodemon for node ?)
I had a similar (or event the same) problem and I changed starting command in the package.json file by adding following flags: --watch --watch-poll to the webpack-dev-server:
{
//...
"scripts": {
"start": "webpack-dev-server --env.ENVIRONMENT=development --content-base src/ --mode development --watch --watch-poll",
// ...
}
// ...
}
Now, using npm start and then changing src files I can see changes in the browser.
Please here https://webpack.js.org/configuration/watch/ for more options.

Resources