I have a web app with React as frontend
and node+express as backend
. The folder structure of app is as in the pic below ( client
folder is within the server
folder)
The package.json
in the client
has the following code
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
The package.json
in the server
has the following code
"scripts": {
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\""
},
When I execute npm run dev
, I get the message the my server is running on port 8080 and the react app is also compiled successfully and can be viewed on http://localhost:3000
But when I visit http://localhost:3000, i get the following
It was working fine but when I added a button.module.css
file, I got error from Typescript. One on the suggested solution on Stackoverflow was to create a declaration.d.ts
file. The error is gone now but the site is not loading !!!
I don't how adding this file is the problem. I tried to run 'npm start' within the 'client` folder
But I do not know what happens, screen switches to 'npm run dev' within the 'server` folder
Can anyone help?
UPDATE
I created 2 more react app with npx create-react-app app --template typescript
.
server
folder andserver
folder (next to client
folder) both of them worked just fine. No issue connecting to localhost:3000.
So I went comparing the contents one by one of my folder and the folders newly created. As it turns out I had deleted the files named react-app-env.d.ts
(this file is automatically created by npx create...
). I deleted because its content is just /// <reference types="react-scripts" />
and nothing else.
I have seen a lot of tutorials where they deleted all the files of the src
folder & I though this file was 'not useful'
I have copied this file into my app folder & it works fine!!!
Lesson Learnt = DO NOT TOUCH what you don't understand; Especially when things are working ;-)
you want a multi-layer architecture but in think npm is working against you.
try unnnested projects, try single repo/multi project approach.
something like this: https://github.com/sombriks/palavrim/blob/main/package.json
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.