将应用程序部署到谷歌应用程序引擎并希望启动 api 和客户端

Question

Following this tutorial to get an api and client on google cloud platform:

https://www.freecodecamp.org/news/create-a-react-frontend-a-node-express-backend-and-connect-them-together-c5798926047c/

I have a root dir with an /api and /client inside it

the /api package.json has the following script

"scripts": {
    "start": "node ./bin/www"
},

the /client package.json has the following script

"scripts": {
    "client-install": "npm install --prefix client",
    "start": "node server.js",
    "server": "nodemon server.js",
    "client": "npm start --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\""
},

When I try to deploy it says:

Step #0: Application detection failed: Error: node.js checker: Neither "start" in the "scripts" section of "package.json" nor the "server.js" file were found. Finished Step #0

I'm thinking it can't find the scripts? What is the best approach to start my api and client at the same time when I deploy?

Answer 1

Well in that tutorial that guy creates the react app using create-react-app and because of that I don't know why you have in the 'start' command in your second package.json the following command 'node server.js'. You should have "start": "react-scripts start", that won't fix your problem but I'm not sure if server.js another server or what.

Anyway I'll try to help you, first 'create-react-app' creates an app which internally uses webpack-dev-server which is cool for developing, but in order to deploy your app you need to run this command

npm run build

After that you will have a folder called 'build' with your react app. Then you need to copy that folder and go to your server project and paste the 'build' folder there. Once you finish that you need to add the following code to tell your server that you want to serve static files

app.use(express.static(path.join(__dirname, 'build')));

And you also need to add the route

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

Now you can test it locally running only your server and the '/' path should take you to the react app. Once you know that is working, you can deploy ONLY that server with the build folder and just one package.json to google app engine. I hope helped you!

Answer 2

My supposition is that the reported problem is generated by the fact that in root directory there is no package.json file. You could try to add one in root directory to handle stuff in app and client directories, but...

... but a taken a look to the tutorial you used and I found some things I don't like, so you want to give you some suggestions. I recently developed a simple tool to visualize charts about covid-19 diffusion in Italy, it uses same structure as your app with different approaches. The main difference is I deploy it in a VPS and I use external tool to launch it so in my package.json file there is not the script command to launch it in prod. It is something like:

cd client && npm install && npm run build && cd .. && npm install && node server.js

You can take a look to github repos to get ideas, but I'm going to explain the main differences.

1. server stuff (with package.json ) is in root directory (simply this could solve your problem)
2. as per other answers, you need to add two lines to your express app to serve the built client as static files:
3. I suggest to use proxy features rather than cors package.

In your express app:

// At the begenning, with other middlewares
app.use(express.static(path.join(__dirname, "client", "build")));
// As last, to substitute any 404 with your client home page
app.get("*", (req, res) => res.sendFile(path.join(__dirname, "client", "build", "index.html")));

I don't know which kind of data you are going to treat, but CORS is a sort of protection you should never disable (by cors package), at least as it is possible. More than this, once you'll be able to solve the reported problem, I'm afraid that following part from the tutorial you used will not work, as it will try to fetch APIs from your app users's localhost:9000 .

callAPI() {
    fetch("http://localhost:9000/testAPI")
        .then(res => res.text())
        .then(res => this.setState({ apiResponse: res }));
}

To both enable CORS and solve fetching from localhost problem you should use proxy feature. In your client package.json file just add:

"proxy": "http://localhost:9000/",

This makes your webpack dev server to proxy calls it can't handle to your dev server, than changing your client fetching function to:

callAPI() {
    fetch("/testAPI")
        .then(res => res.text())
        .then(res => this.setState({ apiResponse: res }));
}

it will automagically works both in dev and prod envs and let you to enable back CORS.

Hope this helps.