5

I am using MERN stack to develop an application. The front end (React + Redux) is totally isolated from backend(express + mongo). I am using CORS, JWT and all good things to connect both of them. The front-end itself has an user view and dashboard or admin view. Now I got stuck at point where I need to define the react routes based on my folder structure. Could someone please suggest me a proper folder structure and router configuration for my use case?

logesh
  • 303
  • 2
  • 8

3 Answers3

1

You can store all views in same directory, like /client i think, if you plan to use some common components, or if applications for both sides (user and dashboard) are not very big.

About routes, it depends. If you use something like react-router, ofc. you should store routes in client folder. Or you can create directory like common to use some shared functions (and routes) in server side and client-side.

steppefox
  • 1,784
  • 2
  • 14
  • 19
1

React doesn’t have opinions on how you put files into folders. But as per my experience on react and redux, the following file structure is a good fit for a dashboard.

my-app
 public
 src
   assets
    images(folder)
    scss(folder)
   utils
   routers
   store
   components
    common
      ...
    users
     Reducer.js
     Action.js
     Api.js
     Constants.js
     Helpers.jsx
     components(folder)
      Index.jsx
      Item.jsx
      Form.jsx
      Show.jsx
      ....
     containers(folder)
      Credate.jsx
      Index.jsx
      Show.jsx
     styles( custom style folder)

Normally try to keep .js/.ts extension for Reducer, Action, Api, Constants, etc. and .jsx/.tsx extension for another file.

Josh Lee
  • 171,072
  • 38
  • 269
  • 275
Sachin Metkari
  • 104
  • 3
1

I dont think there is a right/wrong answer for this question. It depends from team to team.

I like to have view layer, data layer separated. I like to have a good build setup, assets separate, local server separate, configs/scripts separate.

A basic version of my SPA setup looks like this:

.babelrc
.gitignore
package.json
karma.conf.js
src
  components
    App
     App.js
     App.test.js
  data
    app
      appActions.js
      appActions.test.js
      appReducer.js
      appReducer.test.js
  utils
webpack
  webpack.config.js
  webpack.dev.js
  webpack.prod.js
  webpack.test.js
server
 index.js  [mock express server]

For an isomorphic app, I use firebase as the backend. I compile a client.js for the SPA and a server.js for the backend.

.babelrc
.gitignore
package.json
karma.conf.js
client.js
server.js
src
  components
    App
     App.js
     App.test.js
  data
    app
      appActions.js
      appActions.test.js
      appReducer.js
      appReducer.test.js
  utils
webpack
  webpack.config.js
  webpack.dev.js
  webpack.prod.js
  webpack.test.js
  webpack.server.js
functions
  package.json
server
  index.js
Siri
  • 1,117
  • 6
  • 13