Questions on file structure of full stack apps for deployment

user_13000665 0
Viewed 1093

I'm pretty new to developing and deploying full stack applications, so I had a few questions that I've been having a hard time finding the answer to.

I have 2 projects currently. An Express/NodeJS Backend project that contains my API (generated with express-generator), running on port 9000, which I run with npm start. Its file structure is like this:

enter image description here

Then, I have a separate React project for my front-end (generated with create-react-app), running on port 3000, which I run with npm start.

Its file structure is like so:

enter image description here

When I go to deploy this, whether it be on Heroku or AWS or whatever, it needs to be one consolidated project that contains both the front-end and back-end projects, correct? I have seen project layouts that are basically a React app + 1 File for backend, like so:

enter image description here

  1. To deploy my two apps (React App and Express API) as a website, do I need them to be one single project?
  2. If Yes to 1, then why do people use create-react-app and express-generator if it ultimately doesn't leave you with a file-structure for a fullstack app?
  3. Is there any guide that shows how to combine (in the literal sense of file structure, since the two apps are already communicating fine) two apps created with express generator and create-react-app?
  4. If I need to combine them, what does this mean for my package.json?

Right now, in my backend package.json, I have the scripts:

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

and in my front end package.json, I have the scripts:

"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},

I'd imagine that if the two projects are to be merged, the start script would need to be altered to run both?

Interested in learning best practices for the file structure of a fullstack application (In this case, MERN stack just without Mongo). Any advice or suggestions are really appreciated, thank you!

mern reactjs express web-deployment deployment
1 Answers

To deploy my two apps (React App and Express API) as a website, do I need them to be one single project?

No. You can even deploy them to different domains and treat the frontend as another product. There are pros and cons in keeping both apps in the same Git repository.

If Yes to 1, then why do people use create-react-app and express-generator if it ultimately doesn't leave you with a file-structure for a fullstack app?

People use CRA because it's the default way by Facebook and simply works. But many people do Server Side Rendering using frameworks like NextJs or another boilerplate.

Is there any guide that shows how to combine (in the literal sense of file structure, since the two apps are already communicating fine) two apps created with express generator and create-react-app?

If you are simply communicating via API, keep both in different folders.

For React, you are gonna create an optimized production build anyway (you don't need node constantly running in your server to serve the final html and Javascript files).

For the backend, even if you use another language, you deploy normally, as you would while using static html.

user_62818320
Related