4

To precurse this question I'll mention that this is my first question on Stackoverflow so I'm sorry if I miss out on common practices or miss something else that makes this easier to answer.

My question refers to the way that others structure their full-stack applications. In my case, I'm making a PERN (PostgreSQL, Express, React, Node) Stack application. I've looked around and seen some tutorials that suggest that there should be a separation of concerns for front-end and back-end meaning that there should be a root/ directory that contains a /client/ and /server/ directory with their own package.json, node-module, etc. I'm assuming that the README.md, .gitignore, and other common files are still in the root. Overall, I would like to know what directory structures are common to use and if my presumption on the information given is correct.

Example:

  ├─ client/
  │  ├─ node-modules/
  │  ├─ public/
  │  ├─ src/
  │  ├─ package.json
  │  ├─ package-lock.json
  │  └─ ...
  ├─ server/
  │  ├─ node-modules/
  │  ├─ index.js
  │  ├─ package.json
  │  ├─ package-lock.json
  │  └─ ...
  ├─ README.md
  ├─ .gitignore
  └─ ...

Also, I'm curious about the name dedicated to the Javascript that runs the server. I've seen index.js and server.js

Coul Greer
  • 43
  • 2
  • 5
  • 1
    Separation of concerns matters. Don't think it is a single application or a single unit. Backend is separate which is a source of the truth of all the data. Your backend will be able to support your mobile application, web application, desktop application etc as a single unit while your frontend which is a react based application is a different application. you can use one folder contains two sub folder 1 for client , 2 for server that would be better as you will not mess up your application later. https://stackoverflow.com/questions/5178334/folder-structure-for-a-node-js-project (server) – Samarth Saxena Jun 29 '20 at 20:20
  • 1
    https://www.pluralsight.com/guides/how-to-organize-your-react-+-redux-codebase (client) it is purely upto the developer which style he follows. Just take a look – Samarth Saxena Jun 29 '20 at 20:21

1 Answers1

3

Decoupling the front-end from the back-end is a common approach, especially if you have separate teams developing each. Part of the consideration should be what authentication method you want to use (sessions vs tokens) and also how you want to deploy your app.

One benefit of having one node server that serves up your front-end is that it's the same domain so you can use sessions. If you decouple it, it will be on separate domains, so you would generally use tokens.

A benefit of decoupling them is that you can have multiple front-end applications connecting to one Restful API.

I had this same question a couple months ago and tried both methods with different apps. I really think it depends on your use case, but recommend trying both on a couple personal projects.

Here is an example of an app that uses the same server to serve up the build folder. https://github.com/StephenGrider/FullstackReactCode/tree/master/server

Benjamin Hawkins
  • 141
  • 6