We need to simplify the current folder structure

[jinmayamashita]

We need to simplify the current folder structure for the our boilerplate template to CLI.

[G-N555]

├── README.md
├── __mocks__
│   ├── api
│   │   ├── employee.ts
│   │   ├── login.ts
│   │   └── user.ts
│   ├── handlers.ts
│   ├── mockDatabase.ts
│   ├── nodeServer.ts
│   ├── rest.ts
│   └── server.ts
├── babel.config.js
├── index.html
├── jest-setup.ts
├── package.json
├── playwright.config.ts
├── public
│   └── mockServiceWorker.js
├── renovate.json
├── src
│   ├── App.test.tsx
│   ├── App.tsx
│   ├── components
│   │   ├── atoms
│   │   │   ├── Button.module.scss
│   │   │   ├── Button.test.tsx
│   │   │   └── Button.tsx
│   │   ├── layouts
│   │   │   ├── BlankLayout.tsx
│   │   │   └── HeaderLayout.tsx
│   │   ├── molecules
│   │   │   └── Header.tsx
│   │   └── organisms
│   │       ├── EmployeeForm.test.tsx
│   │       └── EmployeeForm.tsx
│   ├── constants
│   │   └── localStorage.ts
│   ├── hooks
│   │   ├── useAuth.test.tsx
│   │   ├── useAuth.tsx
│   │   ├── useCounter.test.tsx
│   │   └── useCounter.ts
│   ├── i18next.ts
│   ├── main.scss
│   ├── main.tsx
│   ├── pages
│   │   ├── Employee.test.tsx
│   │   ├── Employee.tsx
│   │   ├── EmployeeCreate.tsx
│   │   ├── EmployeeList.tsx
│   │   ├── EmployeeUpdate.test.tsx
│   │   ├── EmployeeUpdate.tsx
│   │   ├── Home.test.tsx
│   │   ├── Home.tsx
│   │   ├── Login.tsx
│   │   ├── NotFound.tsx
│   │   ├── Profile.tsx
│   │   ├── SharedStateCount.tsx
│   │   ├── StateHistoryCount.test.tsx
│   │   ├── StateHistoryCount.tsx
│   │   └── __snapshots__
│   │       └── StateHistoryCount.test.tsx.snap
│   ├── react-i18next.d.ts
│   ├── routes.tsx
│   ├── stores
│   │   ├── countStore.test.ts
│   │   └── countStore.ts
│   ├── translations
│   │   ├── en.json
│   │   └── ja.json
│   ├── types
│   │   ├── auth.ts
│   │   ├── employee.ts
│   │   ├── path.ts
│   │   └── user.ts
│   ├── utils
│   │   ├── env.ts
│   │   ├── http.test.ts
│   │   └── http.ts
│   └── vite-env.d.ts
├── tests
│   ├── e2e
│   │   ├── Count.test.ts
│   │   ├── Login.test.ts
│   │   ├── Profile.test.ts
│   │   └── utils
│   │       ├── global-setup.ts
│   │       └── storageState.json
│   └── utils
│       ├── index.ts
│       ├── render.ts
│       └── renderWithQueryClient.tsx
├── tsconfig.json
├── vite.config.ts
└── yarn.lock

This is react-boilterplate current folder structure.
I believe directories under src might be the one we should discuss, but just let me show you all directories to give you entire picture at the beginning.

[jinmayamashita]

Hi, @monstar-lab-oss/reactjs-boilerplate-maintainers

tl;dr:

Here's my idea of the folder structure.
This is a way to get the template code out of the src. (Only put CLI code in src)

├── src
|  └── cli.ts
├── templates
|  ├── _shared
|  |  ├── index.html
|  |  ├── public
|  |  ├── src
|  |  ├── tsconfig.json
|  |  └── vite.config.ts
|  ├── auth
|  |  └── src
|  ├── e2e
|  |  ├── playwright.config.ts
|  |  └── src
|  ├── graphql
|  |  └── src
|  ├── store
|  |  └── src
|  ├── storybook
|  |  └── src
|  └── unit
|     └── src
└── tsconfig.json

• Pros:
  • Easy to Maintenance - The template is easy to use and set up due to its clear and concise structure.
  • Automatically sets up essential configuration files and boilerplate code for React projects.
• Cons:
  • The template does not include any automated testing tools, so the we needs to manually test the after created by the template.
  • Limited features: The template does not provide a wide range of features for creating and managing React projects, so developers may have to look for other tools to supplement it.

long story:

When I first thought about the structure generated by the CLI, I imagined the following structure.

# base
├── index.html
├── src
|  ├── __tests__
|  ├── pages
|  ├── hooks
|  ├── components
|  ├── helpers
|  ├── main.tsx
|  ├── app.tsx
|  └── vite-env.d.ts
├── tsconfig.json
└── vite.config.ts

Basically, considering that Restful will be supported,
the options available to the user in the CLI, the following options are possible.

• They wants to use graphql for APIs communication.
• They wants to use auth for user authentication.
• They may need a store for state management.
• Testing tools, e.g., e2e, storybook, unit-tests

These were going to be represented in a diagram as follows.

As shown in the figure, routes are used for aggregation, so I used the CLI option to create routes.

e.g.,

https://github.com/jinmayamashita/sandbox-react-template-cli/blob/407fec941be98e8ecf792cacfeba2aa3dde139e0/src/index.ts#L123-L147

Only the parts of each template that are common to each other are created dynamically. The folder structure of each template is matched; the basic structure eliminates the need for complex merging processes. (Even if there is som duplication of code.)

# templates
├── auth
|  └── src
|     ├── app.tsx
|     ├── hooks
|     |  └── useAuth.tsx
|     └── pages
|        ├── login.tsx
|        └── secret.tsx
├── e2e
|  ├── playwright.config.ts
|  └── src
|     └── __tests__
|        └── e2e
|           └── home.e2e.test.ts
├── graphql
|  └── src
|     ├── __tests__
|     |  └── mocks
|     |     └── api.ts
|     └── pages
|        └── user.tsx
├── store
|  └── src
|     ├── hooks
|     |  └── useStore.ts
|     └── pages
|        └── bear.tsx
├── storybook
|  └── src
|     └── components
|        └── atom
|           └── button.stories.tsx
└── unit
   └── src
      └── __tests__
         ├── getName.test.ts
         └── sum.test.ts

This is the screen when the CLI is executed.

Kapture.2022-12-13.at.14.22.58.mp4

Feel free to check out the code here.
https://github.com/jinmayamashita/sandbox-react-template-cli

What do you think about this structure? If you have any opinions, I would love to hear them.

[G-N555]

@jinmayamashita
thank you so much for your suggestion and working for create cli.(Looks awesome...!!)
For me looks good to go with that since the same structure can be reusable for other framework like Vue.

Probably, _shared can be one layer above to reuse with other framework....?

What I'm imagining based on your suggestion is like below

├── src
|  └── cli.ts
├── _shared
|  ├── index.html
|  ├── public
|  ├── src
|  ├── tsconfig.json
|  └── vite.config.ts
├── templates_react
|  ├── auth
|  |  └── src
|  ├── e2e
|  |  ├── playwright.config.ts
|  |  └── src
|  ├── graphql
|  |  └── src
|  ├── store
|  |  └── src
|  ├── storybook
|  |  └── src
|  └── unit
|     └── src
├── templates_vue
|  ├── auth
|  |  └── src
|  ├── e2e
|  |  ├── playwright.config.ts
|  |  └── src
|  ├── graphql
|  |  └── src
|  ├── store
|  |  └── src
|  ├── storybook
|  |  └── src
|  └── unit
|     └── src
└── tsconfig.json

Btw, I wonder if we need 2 tsconfig.json(the one on the root and another one inside _shared)?

[jinmayamashita]

Probably, _shared can be one layer above to reuse with other framework....?

Unfortunately, _shared cannot be reused in other frameworks except react (spa). In order to work well with other frameworks, it would be better to configure templates in monorepo format. (This is a topic for another discussion).

[jinmayamashita]

Btw, I wonder if we need 2 tsconfig.json(the one on the root and another one inside _shared)?

It is necessary.　root's tsconfig.json is for the CLI, The tsconfig.json directly under _shared is the base set for generated templates. (It may be necessary to restrict the scope)

[G-N555]

It is necessary.　root's tsconfig.json is for the CLI, The tsconfig.json directly under _shared is the base set for generated templates. (It may be necessary to restrict the scope)

Thanks, I just misunderstood what this repository is. Like you said, both CLI and _shared is totally different scope and it must have own configuration inside.

[G-N555]

@jinmayamashita
One more question actually, I tried to test your cli, but it says 404 error when I exec npx create-react-code.

npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/create-react-code - Not found
npm ERR! 404 
npm ERR! 404  'create-react-code@latest' is not in this registry.
npm ERR! 404 
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/go_nakano/.npm/_logs/2022-12-14T05_26_25_799Z-debug-0.log

As error said, create-react-code@latest is not in registry and wonder how you get template with cli like the one on video you shared.

[mvn-luanvu-hn]

@G-N555
I think you can run command npm i -g first, then run command npx create-react-code

[mvn-luanvu-hn]

@jinmayamashita
Thanks for implementing prototype of CLI!
It looks good to me.
I'm making some small changes to the repo https://github.com/jinmayamashita/sandbox-react-template-cli and will create a PR to show my ideas to you.

[mvn-luanvu-hn]

@jinmayamashita @G-N555
I just added a PR to make folder structure more modular
https://github.com/jinmayamashita/sandbox-react-template-cli/pull/1
Please tell me about your opinion about that.

[jinmayamashita]

@mvn-luanvu-hn @G-N555
Another approach. we are trying a way to manage the CLI with monorepo and it looked good.
I will let you know as soon as it is completed.

https://github.com/jinmayamashita/create-code/tree/main/packages/create-code

[jinmayamashita]

@G-N555 @mvn-luanvu-hn

As I suggested at a previous meeting, I have created a CLI with Monorepo base I have prepared a demo repository.
Also, it seems to me that it would be better to have the modules in the preview app, and I have tried to structure it that way.

These PRs show how the CLI configures the modules.

• https://github.com/jinmayamashita/create-code/tree/main/packages/create-code
• https://github.com/jinmayamashita/create-code/pull/5
• https://github.com/jinmayamashita/create-code/pull/4

If you have any thoughts, please share your thoughts 🙏🏼