Note Admin/shared Reports and Users can both access the shared
![folder structure diagram for project folder structure diagram for project](https://microchipdeveloper.com/local--files/harmony:folder-structure/physical_and_logical.jpg)
Here is our growing app with some new shared, and not Share any components with each other or the parent, we put the sharedĬode in "shared". So what about when you've got some shared componentsĮvery screen also has a "shared" generic directory. These components are used only in the current screen, not even theĬhild screens. In other words, we've introduced "scope" into our applicationĮach will probably have a components directory. With this structure, each screen has its own directory to hold its Some top-level application bootstrapping stuff at the root, like That handles the entry into the screen, also known as a "Route Handler" Next, each of these screens has an index.js file, which is the file We would now set up our directories like this: app Only have one "feature" folder but many "generic" folders. If weĬonsider all folders being either a "generic" or a "feature" folder, we It's inverted from the model that we've used in other systems. The file structure maps directly to the route hierarchy, which maps CI runs only the tests that matter (future).What's shared, what's not, prevents accidental regressions,Īvoids huge directories of not-actually-reusable modules, etc) Module usage predictibility (refactoring, maintainence, you know.Make up your own minds and don't use me as some weird appeal to authority, I'm just an average dev like anybody else. New files and folders are a pain.īut when you're in a decently large organization where different development teams work within pretty well-defined feature boundaries of an application, I like the following approach but I would keep the feature folders flat, no route nesting.Īlso, don't you dare throw this at your eng team and be like "this is the way". If I can build an app with one 2000 line file I will. It was originally a gist for the engineering org I was in, not a "general suggestion" for any React app. this gist has been shared and followed for years, I regret not giving more background. This project is deployed automatically using GitLab CI/CD to GitLab Pages, so simply git push on master to trigger a new deployment. See the section about deployment for more information. The build is minified and the filenames include the hashes. It correctly bundles React in production mode and optimizes the build for the best performance. yarn buildīuilds the app for production to the build folder. See the section about running tests for more information. Launches the test runner in the interactive watch mode. You will also see any lint errors in the console. This project was bootstrapped with Create React App, so it contains all the scripts you know and love: yarn start If you're curious about this project's implementation of tree, check out src/lib/, and more specifically, src/lib/generate-tree.ts. Renovate Bot for automatically keeping dependencies up-to-date.
#FOLDER STRUCTURE DIAGRAM FOR PROJECT CODE#
![folder structure diagram for project folder structure diagram for project](https://www.theinformationlab.co.uk/wp-content/uploads/2017/08/2017-08-10_21-40-05.png)
![folder structure diagram for project folder structure diagram for project](https://docs.nomagic.com/download/attachments/36315965/Folders_and_files_structure_required_for_template_distribution.png)
JSONCrush for efficiently saving the application's state in the URL.The project's theme will automatically adjust based on your OS's theme using prefers-color-scheme - give it a try!.The Flatly and Darkly themes from Bootswatch.Some other technologies this project uses: is written in TypeScript and React/ Redux. But generating a nice-looking diagram like the one above is painful by hand. It's common to explain or discuss a file system structure on text-based sites like StackOverflow, GitLab, or GitHub.