comnori / cra-template-awesome-soho

Create React App Template - for SOHO

Create React App Template for SOHO

Legacy Template

React template in javascript/Typesciprt base using Create-Reract-APP

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.

DEMO Page

Recommendation

1. 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.

2. 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

1. Freedom of choice of language
   • ECMAScript (javascript)
   • ECMAScript with JsDoc typecheck
   • Typescript
2. Collaboration between library and vscode extension
3. Well-defined folder structure
4. Document Automation
5. [Light, Dark] theme changer
6. Multilingual support
7. 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

1. Enable(true) / Disable(false)

   tsconfig.json

   {
     ...
     "checkJs": true,
     ...
   }

2. Optionnal

   If you want to apply or not apply type check to only some parts, check the guide below.

   JS Projects Utilizing TypeScript

3. 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

1. Ant Design Default theme

   The initial theme acts as the system's theme setting.

2. 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

1. 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

cra-template-awesome-soho's Issues

add r3f-pack instead of react-script

Description

R3F-Pack is a simplified and maintained react-scripts alternative.

It performs all the same functionality that react-scripts provides in this course,

It serves the dev version on port 3000
It auto opens the browser at address http://localhost:3000
It enables Hot Module Reloading (HMR)
It serves the development version from the ./public folder
npm run build builds a production quality version of your app, and will copy all static files & folders under ./public to the ./build folder ready for deployment
Production bundle.js contains a hash in its name to prevent caching
It supports building with TypeScript
It indicates 0 vulnerabilities when running npm install, at the time of writing this message
Found 0 Vulnerabilities

https://sbcode.net/react-three-fiber/r3f-pack/