CODEWITHSUNDEEP
reactjssingle-page-applicationorganization
iHowell
iHowell

Reputation: 2447

How should I organize my application?

I am currently working on a React/TypeScript project and have separated my files into a few folders. My project is solving Sudoku interactively, using various processing methods, and so I have split up my application into this structure:

sudokusolver/
    css/
    dist/
    fonts/
    img/
    js/ -> external libraries, ie. jquery, etc.
    node_modules/
    server/ -> fetches puzzle data from the server
    ts/
        actions/ -> user actions stored for history navigation
        components/
        containers/
        enumerations/
        models/ -> stores multiple actions for history navigation
        solver/ -> sudoku solving methods
        index.tsx
    index.html
    package.json
    ...

Right now, my components/ and containers/ folders are getting fairly large. I'm wondering what scheme I should follow for reorganizing my file structure, knowing that this is a single page application. Any help would be appreciated.

Upvotes: 0

Views: 83

Answers (1)

Tyler Sebastian
Tyler Sebastian

Reputation: 9458

From what you posted, it reads like your component and container folders are flat - I don't think that's a good idea - it will, as you say, lead to fairly lengthy folders.

One of my personal projects has the following layout. Under components, I have all my reusable components and component pieces. They're more or less nested arbitrarily - I'll have a "game" folder under modals, layout, , form, etc - just to help with clutter. "Containers" (as I understand them), are under "routes," and their folder structure follows the URL path that they're loaded agains (/profile/games uses containers/wrapper from routes/profile/games/...)

enter image description here

it would also help, in my opinion, to move everything not globally related to your project's build (i.e. everything but webpack definitions, npm's package.json, gulpfiles, (babel/eslint/tslint)rc files, etc) into a subfolder - src or similar.

I would also split your server and client applications - they don't need to be under the same folder. I usually do something like 

projectname/
    project_client/
        # client src
    project_server/
        # server src

it will help cut down on clutter.

Upvotes: 1

Related Questions