Folder structure for frontend

[sdevalapurkar]

This is what I propose using for the folder structure for our frontend react app:

my-app
├── build
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src
├── .gitignore
├── package.json
└── README.md

• build is the location of the final, production-ready build.
• public is where the static files will reside.
• src is where the dynamic files will reside.

src can look something like this:

src
├── components
│   └── app
│   │   ├── app.css
│   │   ├── app.js
│   │   └── app.test.js
│   └── index.js
├── images
│   └── logo.svg
├── index.css
├── index.js
└── service-worker.js

All the react components can be found in the components directory. The components/index.js file will serve as a barrel through which all sibling components are exported.

Since we are using storybook and CDD, each component will be its own directory with the component code, styling, tests, as well as .stories.js file.

This is pretty much what create react app provides out of the box, except slightly modified and adjusted to suit our needs of CDD and focusing on component-first design and development.

[alexjoybc]

That looks good, couple of questions witg my little frontend knowledge ;-) :

• should the build folder be in gitignore, I don't think you need a build version on git
• You can document this in the readme so that when it's approved your doc is here :-)
• do you have the root structure of your repo, my-app should be in the root src directory
• why public is outside of src, are those file not needed to build your app?

Also, as cool issue are, gov is using jira to track issues, I know the discussion is way easier in github...

Thanks @sdevalapurkar for defining your structure ahead, it will help doing it right early :-)

[sdevalapurkar]

Thanks @alexjoybc for the questions/feedback, appreciate it. As for the questions: 1) I think the build can be in the gitignore, that makes sense to me - good point 2) Yes definitely good point, I will open a pull request with these changes 3) Yes that is right - I think Phil had laid out the folder structure for the root but my-app is not the root of the repo, it is the root of the frontend directory 4) That is right - If the file is not imported by the JavaScript application and must maintain its file name, we can put it here. Files in the public directory will maintain the same file name in production, which typically means that they will be cached by the client and never downloaded again. I think we will have very few files in here, but I think it makes sense to leave it outside of the src directory

[nanyangpro]

That's very helpful, thanks @sdevalapurkar. One question, besides the basic HTML and CSS coding, will I also need to create the image assets such as the logo and favicon or do they already exist somewhere? (Since this wasn't mentioned during our front-end work split meeting and I currently don't have access to Jira, just want to confirm.)

[sdevalapurkar]

Great question - unfortunately, I don't know the answer. Please bring it up at standup and let's discuss it with the team. I would say you should be involved in designing those 😄 as it would look great