React/Node app setup and deploy properly

[etiennelawlor]

I have a github repository and at the root direct it has two directories /server and /client.
/server is where the Node code is located, and /client is where the React code is located. I tried to deploy but i got the following error

# Page Not Found

Looks like you've followed a broken link or entered a URL that doesn't exist on this site.

[ Back to our site](https://62aeecd477999b26d206fa9a--profound-salmiakki-69883a.netlify.app/)

---

If this is your site, and you weren't expecting a 404 for this path, please visit Netlify's ["page not found" support guide](https://answers.netlify.com/t/support-guide-i-ve-deployed-my-site-but-i-still-see-page-not-found/125?utm_source=404page&utm_campaign=community_tracking) for troubleshooting tips.

Are there some additional steps I need to take to deploy my app correctly?

[hrishikesh]

You’ve not set any configuration:

I think you need to build your app before publishing it.

[etiennelawlor]

So my /client/package.json file looks like this

{
  "name": "custom-name",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.9.3",
    "@emotion/styled": "^11.9.3",
    "@mui/icons-material": "^5.8.3",
    "@mui/material": "^5.8.3",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.27.2",
    "ethers": "^5.6.8",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-lottie-player": "^1.4.3",
    "react-oauth-popup": "^1.0.5",
    "react-scripts": "5.0.1",
    "use-color-thief": "^1.2.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:4000",
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

and my /server/package.json looks like this

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "server": "nodemon index.js",
    "client": "npm run start --prefix ../client",
    "dev": "concurrently --kill-others-on-fail \"npm run server\" \"npm run client\""
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.16"
  },
  "dependencies": {
    "axios": "^0.27.2",
    "body-parser": "^1.20.0",
    "concurrently": "^7.2.1",
    "dotenv": "^16.0.1",
    "express": "^4.18.1",
    "file-type": "^17.1.2",
    "node-fetch": "^2.6.1",
    "read-chunk": "^4.0.2",
    "twitter": "^1.7.1",
    "twitter-api-v2": "^1.12.2"
  }
}

so what should my build settings be in that case?

[hrishikesh]

base directory: client
build command: npm run build
publish: build

[etiennelawlor]

Okay thanks for the help. Now it is successfully deploying. However, there is a 404 error that is getting thrown now, and I believe it has to do with the Router. In the React app I make a call

const response = await fetch(`/nfts?address=${account}`);

but now it is throwing a 404 error. When i tested this code on localhost it doesn’t throw this error. I have set up the proxy attribute "proxy": "http://localhost:4000" in the client/package.json that is in the comment above. Is there some additional things that need to be set for invoking Node endpoints from the React app?

[jasiqli]

@etiennelawlor

"proxy": "http://localhost:4000"

localhost addresses only work on your local machine.

[etiennelawlor]

So then I should remove that on a production build? Is there a way to dynamically configure that for dev and production environments?

[etiennelawlor]

If you are in the client directory then the npm run build command will only run the react app, and not the node app. How can i run the two simultaneously. I think that’s why the router is not working at the moment.

[coelmay]

Hey @etiennelawlor

The node app won’t work here. See

[Support Guide] Can I run a web server, HTTP listener, and/or database at Netlify?

Last reviewed by Netlify Support on December 2022 How do I run a server/database at Netlify? We often get questions about how to run a specific backend server or database at Netlify. Examples of these types of questions include: How to I get my node HTTP listener to respond to requests? How do I start Mongo/MySQL/<insert-some-database-here> running on the server? How can I SSH into my website? We are here today to answer these questions - and the answer is: you can’t! What do you m…

You will need to deploy the server elsewhere, or turn it into a serverless function see

How to run Express.js apps with Netlify Functions

Do note too there are specific requirements for Crypto/NFT as explained by @perry numerous times e.g.

Build script returning Non-zero exit code 2

hey there, while we’re talking I wanted to let you know ]that we ask all businesses in the NFT/Crypto space to speak with our sales and solutions team to purchase a contract to ensure that your site is on an appropriate account level for your usage. You can reach them here: Our High Performance Edge product is usually a necessity to be able to handle and administer successful launches. We have seen many customers who have sites like these get attacked, and on our lower plans, such as Starte…

And there is a great explanation from @luke as to why this is the case

Attempting to connect with metamask and getting blocked by client

Hi, @nathanmartin. We are not trying to exploit the NFT people. We just want them to pay for what they use. We are preparing them for bills which they should expect and, unfortunately, they do not. I have a question for you: Do you really think NFT sites are just like any other site? If so, I’m curious why you believe that. If you do me the favor of answering that, I’ll explain below why I think they differ. First, this is the problem we are trying to avoid below: Someone that isn’t part…

[etiennelawlor]

I am working on a project that has a React frontend and Node backend. I looked into hosting the project on Netlify , but apparently the Node backend code can’t be run on Netlify . I have seen some developers suggesting to use Heroku to host the backend code. I have seen several examples of this but they all have slightly different steps and configuration. At the moment i have a root project directory with two child directories: /server (where the Node backend code is located) and /client (where the React frontend code is located). Do you have any suggestions of how to properly configure a React/Node app?

[coelmay]

@etiennelawlor

Do you have any suggestions of how to properly configure a React/Node app?

You provided your own answer

@etiennelawlor

I have seen some developers suggesting to use Heroku to host the backend code.

Deploy the backend to Heroku, and frontend to Netlify. You can then proxy to the backend from the frontend using Netlify’s Static Routing

Rewrites and proxies