v1.0.0

.editorconfig

@@ -0,0 +1,6 @@
+[*]
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+end_of_line=lf

.eslintrc.json

@@ -0,0 +1,69 @@
+{
+ "root": true,
+ "env": {
+ "browser": true,
+ "es2021": true,
+ "node": true
+ },
+ "extends": [
+ "plugin:react/recommended",
+ "xo"
+ ],
+ "parser": "@typescript-eslint/parser",
+ "parserOptions": {
+ "ecmaFeatures": {
+ "jsx": true
+ },
+ "ecmaVersion": 12,
+ "sourceType": "module"
+ },
+ "plugins": [
+ "react",
+ "@typescript-eslint"
+ ],
+ "ignorePatterns": ["dist", "node_modules"],
+ "rules": {
+ "indent": [
+ "error",
+ 2,
+ { "SwitchCase": 1 }],
+ "object-curly-spacing": ["error", "always"],
+ /*
+ To avoid using non-Latin characters in variable names.
+ E.g. 'C' in Latin and 'С' in cyrillic are different symbols with different codes.
+ Use regex for your keyboard layout.
+ Default: cyrillic/ukrainian/russian
+ */
+ "id-match": ["error", "^((?![а-яА-Я,ґҐ,іІ,їЇ,ёЁ]).)*$"],
+ /*
+ tsconfig 'compilerOptions: { "jsx": "react-jsx" }' allows to not use 'import React from "react"'
+ for using JSX syntax. Turning off eslint error also.
+ */
+ "react/react-in-jsx-scope": "off",
+ /*
+ To avoid false-positive unused-vars in enum need to switch from core eslint to ts-eslint
+ https://github.com/typescript-eslint/typescript-eslint/issues/2621
+ */
+ "no-unused-vars": "off",
+ "@typescript-eslint/no-unused-vars": "error",
+ /*
+ Normolize tag spacing in jsx
+ */
+ "react/jsx-tag-spacing": ["error", {
+ "closingSlash": "never",
+ "beforeSelfClosing": "always",
+ "afterOpening": "never",
+ "beforeClosing": "never"
+ }],
+ "react/jsx-curly-spacing": ["error",
+ { "when": "never",
+ "attributes": true,
+ "children": true
+ }]
+ },
+ "settings": {
+ "react": {
+ "version": "detect"
+ }
+ }
+}

.gitignore

@@ -0,0 +1,6 @@
+dist
+node_modules
+coverage
+.env
+.vscode
+.swc

.nvmrc

@@ -0,0 +1 @@
+16

.stylelintrc.json

@@ -0,0 +1,82 @@
+{
+ "extends": [
+ "stylelint-config-idiomatic-order"
+ ],
+ "plugins": [
+ "stylelint-scss"
+ ],
+ "rules": {
+ "string-quotes": "single",
+ "declaration-no-important": true,
+ "declaration-block-single-line-max-declarations": 1,
+ "block-closing-brace-empty-line-before": "never",
+ "block-closing-brace-newline-after": "always",
+ "block-closing-brace-newline-before": "always",
+ "block-opening-brace-newline-after": "always",
+ "block-opening-brace-space-before": "always",
+ "color-hex-case": "lower",
+ "color-hex-length": "short",
+ "declaration-empty-line-before": "never",
+ "declaration-colon-space-before": "never",
+ "declaration-colon-space-after": "always",
+ "declaration-block-semicolon-newline-after": "always",
+ "media-feature-colon-space-before": "never",
+ "media-feature-colon-space-after": "always",
+ "media-feature-range-operator-space-after": "always",
+ "media-feature-range-operator-space-before": "always",
+ "rule-empty-line-before": [
+ "always",
+ {
+ "ignore": [
+ "after-comment",
+ "first-nested",
+ "inside-block"
+ ]
+ }
+ ],
+ "at-rule-empty-line-before": [
+ "always",
+ {
+ "except": [
+ "first-nested"
+ ]
+ }
+ ],
+ "at-rule-name-case": "lower",
+ "at-rule-name-space-after": "always",
+ "at-rule-semicolon-newline-after": "always",
+ "at-rule-semicolon-space-before": "never",
+ "at-rule-no-unknown": null,
+ "scss/at-rule-no-unknown": true,
+ "max-empty-lines": 1,
+ "value-list-comma-space-before": "never",
+ "value-list-comma-space-after": "always",
+ "selector-combinator-space-after": "always",
+ "selector-combinator-space-before": "always",
+ "selector-descendant-combinator-no-non-space": true,
+ "selector-pseudo-class-case": "lower",
+ "selector-pseudo-element-case": "lower",
+ "selector-type-case": "lower",
+ "selector-list-comma-newline-after": "always",
+ "selector-list-comma-space-before": "never",
+ "length-zero-no-unit": true,
+ "property-case": "lower",
+ "unit-case": "lower",
+ "value-list-max-empty-lines": 0,
+ "indentation": 2,
+ "no-eol-whitespace": true,
+ "no-missing-end-of-source-newline": true,
+ "no-empty-first-line": true
+ },
+ "overrides": [
+ {
+ "files": [
+ "**/*.scss"
+ ],
+ "customSyntax": "postcss-scss"
+ }
+ ],
+ "ignoreFiles": [
+ "dist/*.css"
+ ]
+}

.swcrc

@@ -0,0 +1,14 @@
+{
+ "jsc": {
+ "target": "es2021",
+ "parser": {
+ "syntax": "typescript",
+ "tsx": true
+ },
+ "transform": {
+ "react": {
+ "runtime": "automatic"
+ }
+ }
+ }
+}

README.md

@@ -0,0 +1,159 @@
+# React Proto - React TypeScript Boilerplate
+
+![node.js@16](https://img.shields.io/badge/node.js-16-339933?style=for-the-badge&logo=nodedotjs) ![typescript@4](https://img.shields.io/badge/typescript-4-3178C6?style=for-the-badge&logo=typescript) ![reactjs@18](https://img.shields.io/badge/Reactjs-18-61DAFB?style=for-the-badge&logo=react) ![webpack@5](https://img.shields.io/badge/webpack-5-8dd6f9?style=for-the-badge&logo=webpack) ![html@5](https://img.shields.io/badge/html-5-E34F26?style=for-the-badge&logo=html5) ![[email protected]](https://img.shields.io/badge/sass-1.5-CC6699?style=for-the-badge&logo=sass)
+
+<img align="right" width="100" src="src/assets/images/logo.png">
+
+**Template React project with full TypeScrip and SSR support.**
+
+This project is a compilation of different approaches in React development that allows not only to start a new project quickly, but to learn how it works under the hood.
+
+---
+
+## Issue
+
+Every new React developer knows that React is a library, not a complete framework. Thus, it provides maximum flexibility. However, a lot of knowledge is required to create a fully functional web application powered with React.
+
+That is why there exist such a famous framework as [Next.js](https://nextjs.org/) as well as a tool [Create React App (CRA)](https://create-react-app.dev/).
+
+Despite the advantages that such tools have, there are some cons that their user may face:
+
+- Lack of understanding how exactly certain solutions work and why they are applied;
+- Lack of flexibility: applied solutions are difficult to fine-tune to your needs;
+- The complexity of the codebase of these tools.
+
+As a result, novice React developers have two options for action:
+
+1. Simply apply these tools and frameworks to get the product without going into the nuances of their implementation;
+2. Independently collect bit by bit information on how to implement certain functions in React ecosystem.
+
+Thus, the goal of this project is to **collect in one place all the most common methods of working with the React ecosystem** without being tied to a specific framework or tool like CRA.
+
+## What's Inside
+
+Core:
+
+- **React** 18+ (**preact** as an option *coming soon*)
+- **webpack** 5+ (with optional **SWC** support and SSR or static build)
+- **TypeScript** (with strict rules, including webpack configuration)
+
+SSR:
+
+- **Express** (with render to stream option including helmet data and initial state pushing)
+
+State:
+
+- **Redux** 4+ (**ModX** as an option *coming soon*)
+
+Router:
+
+- **React Router**
+
+Code Splitting:
+
+- **Loadable Components** (SSR compatible)
+
+API:
+
+- **RTK Query**
+
+Styles:
+
+- **(S)CSS modules** (with TypeScript support)
+
+Linters:
+
+- **ESLint**
+- **Stylelint** (including rules order)
+
+Tests:
+
+- *coming soon*
+
+Other:
+
+- API request caching (powerd by RTK Query)
+- Hot reload (including state, style and server code hot reloading)
+- VSCode support with error higlight and on save fixes
+- Script for fast component creation
+- Optional Service worker and offline status detector
+
+## The App
+
+This boilerplate includes a simple application with:
+
+- Several screen/pages with their own routes
+- Local counter
+- Global counter
+- One of the components is dynamically loaded
+- API requests
+- Loading spinner
+- Theme swithcer (light and dark)
+- Offline detector
+
+![The App](src/assets/images/app.gif)
+
+## How to Use
+
+### Quick Start (SSR with hot reload)
+
+1. Clone this repo:
+
+ `git clone https://github.com/StopNGo/react-proto`
+2. Install all packages:
+
+ `npm i`
+3. Run project in a development mode:
+
+ `npm start`
+4. Open your browser with the next address:
+
+ `http:https://localhost:8080/`
+
+### Build and run a server (SSR)
+
+1. Build the project (production bundle will be in the `"dist"` folder):
+
+ `npm run build`
+2. Run a server:
+
+ `npm run run`
+3. You can test the server locally:
+
+ `http:https://localhost:3000/`
+
+### Static development mode with hot reload
+
+- Just run the next command and browser will open automatically:
+
+ `npm run start:static`
+
+### Static production
+
+- Run the next command and get a production bundle in the `"dist"` folder:
+
+ `npm run build:static`
+
+## Basic App Configuration
+
+All configuration is available in files with constants:
+
+- `webpack\constants.ts` - contains working directories, SWC option and other related to bundling staff
+- `src\constants` - a directory with app configuration constants files
+- `src\server\constants.ts` - contains server port and render to stream options
+
+## Documentation
+
+*Coming soon.*
+
+One of the goals of this project is to provide some common soultions in React development and to clarify why they were chosen and how they work. So, such information will be present in this documentation in an orderly fashion.
+
+## Feedback
+
+I welcome any feedbacks, suggestions and questions related to this project.
+
+You can leave them [here](https://github.com/StopNGo/react-proto/issues).
+
+![Thank you!](http:https://media.riffsy.com/images/26d31721af290a7e42eae0498a4730a5/tenor.gif)
+
+**Thank you!**