Improvement in instructions in README.md

[Bernice55231]

In order to try this project, the users need to start both the backend and the frontend. Also, as .env.example indicates, port 3000 is used by backend, so we need to start the backend first, and then start the frontend with another port, say 3001. Otherwise, the default port for the frontend is also port 3000, which conflicts with the backend starts. I think it would be better for make a clarification on the general README.md file! Thank you

[MarconLP]

@Bernice55231

The frontend is supposed to run on port 3000
and the backend is supposed to run on port 3001

The .env.example for the frontend:

...
# server hosts
REACT_APP_LANDING_HOST=https://tablane.net
REACT_APP_BACKEND_HOST=http://localhost:3001      <---- referring to express backend
REACT_APP_REALTIME_EDITING_WEBSOCKET=ws://localhost:3002
...

The .env.example for the backend

...
FRONTEND_HOST=http://localhost:3000   <--- THIS value is referring to the react frontend
...

Please correct me if I am missing something

[Bernice55231]

If I start the backend first, then open up a new terminal for running front end with `npm start`, it will pop up this message.

I also encountered this page for backend when I went to the localhost:3000 route, I was wondering whether it is normal like that:

[MarconLP]

The backend start logic:

http.listen(process.env.PORT || 3001, () => {
    console.log(`Listening on port ${process.env.PORT || 3001}`)
})

It uses the .env.PORT or 3001 and console.log it accordingly

Can you share your output here and check if you have the env variable PORT set to something?
Can you try to start it with PORT=3001 npm run dev?

[Bernice55231]

The backend start logic:

http.listen(process.env.PORT || 3001, () => {
    console.log(`Listening on port ${process.env.PORT || 3001}`)
})

It uses the .env.PORT or 3001 and console.log it accordingly

Can you share your output here and check if you have the env variable PORT set to something? Can you try to start it with PORT=3001 npm run dev?

Oh, I see. So if I start the frontend first then the backend will automatically take the PORT 3001. I am just a bit confused when I first tried to start the project. So I was wondering whether there should be some extra instructions on the readme page :)

[MarconLP]

The backend start logic:

http.listen(process.env.PORT || 3001, () => {
    console.log(`Listening on port ${process.env.PORT || 3001}`)
})

It uses the .env.PORT or 3001 and console.log it accordingly
Can you share your output here and check if you have the env variable PORT set to something? Can you try to start it with PORT=3001 npm run dev?

Oh, I see. So if I start the frontend first then the backend will automatically take the PORT 3001. I am just a bit confused when I first tried to start the project. So I was wondering whether there should be some extra instructions on the readme page :)

Not exactly, the backend will start on port 3001 if process.env.PORT is not set. You can read more about it here.

@Bernice55231 Apparently you have the .env.PORT variable set globally, we could change the dev script to always start with PORT=3001