cra-template-awesome-soho v1.0.10
This template only considers Client Side Rendering (CSR) and is a form of the most basic React technology considered by the creator rather than the latest trends.
Since Create React App (CRA) is no longer supported, modern React templates composed of Vite, Typescript, etc. are being worked on.
Recommendation
This template is recommended to be used in devcontainer to ensure the same operation on Linux / Windows / Mac.
- On Windows, the script is not guaranteed to work if you are not using WSL.
This template has vulnerabilities in create-react-app, so if possible, use vite-template instead.
Browser Support
Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
Installation
Install CRA template
> npx create-react-app my-app --template awesome-soho
Features
- Freedom of choice of language
- ECMAScript (javascript)
- ECMAScript with JsDoc typecheck
- Typescript
- Collaboration between library and vscode extension
- Well-defined folder structure
- Document Automation
- Light, Dark theme changer
- Multilingual support
- IDE environment integration
Libraries
Language
Created by
Library
- pino
- dayJs
Dev tools
Source Folder structure
src
├── assets // like svg
├── components // atomic design
│ ├── atoms
│ ├── molecules
│ ├── organisms
│ └── templates
├── config // project configuration
│ ├── i18n // i18next resource
│ │ ├── {lang} // ISO 639-1 Language Code [en,...,ko]
│ │ │ └── translation.json
│ ├── MenuItems.js
│ └── Router.js
├── context // React Context
│ └── {context name} // Context domain name
│ ├── components // Context related components
│ └── hooks // Context related hooks
├── features // Redux
│ └── {reducer name}
├── hooks // common hooks
├── lib // Library configuration
│ ├── components
│ └── {library name}Config.js
├── pages // Pages
│ ├── {domain}
│ │ ├── {page}
│ ├── {page}
│ │ ├── components // children for page
│ │ ├── {page}.jsx
│ │ ├── {page}.module.scss // module scss
└── utils // common utils
Project configuration
Type check enable or disable
Enable(true) / Disable(false)
tsconfig.json
{ ... "checkJs": true, ... }
Optionnal
If you want to apply or not apply type check to only some parts, check the guide below.
Using typescript
Router
src/config/Router.js
MenuItems
src/config/Menu.js
JsDoc generation
yarn doc
doc
folder created
declaration export
yarn type
type
folder created
Library configuration
Theme Config
Ant Design Default theme
The initial theme acts as the system's theme setting.
Ant Design Customize theme
To modify the Antd Theme, set the designToken according to the Ant Design Customize Theme guide.
src/lib/themeConfig.js
const themeConfig = { themeName: getSystemCurrentTheme, designToken: { components: { Layout: { headerHeight: 64, }, }, }, componentSize: "middle", };
Troubleshooting
error `TS2307
: Cannot find module 'moduleA'
src/react-app-env.d.ts
Add the extension corresponding to the file.declare module "*.png"; declare module "*.svg"; declare module "*.jpeg"; declare module "*.jpg"; declare module "*.scss"; declare module "*.sass";
Known Issue
- NPM high severity vulnerabilities : See issue
- nth-check
- pug
- taffydb
- better-doc : Solved when deploying better-docs that supports jsdoc 4.0
- Warn display issue when npm install on x86_64 mac : See issue
Working
Scheduled to be available in 1.1.0
- Jest
- Storybook
- Cypress