React-Typescript-Webpack was config with React, Typescript, and Webpack without CRA. Faster to start your next react project.

Overview
react typescript webpack starter

Start your react typescript project with manual webpack config in seconds

Flexible to control webpack, easy to deploy
Keywords: React Starter, Webpack, Typescript, React.js, Redux, Babel, jest, react-router, sass, redux-thunk, pm2

Created with by 👻 Aldenn


Overview

React-Typescript-Webpack was config with React, Typescript and Webpack without CRA. Faster to start your next react project.


Quick Start

For Development:

  1. Clone this repo to your local machine using:

    git clone git@github.com:thaind97git/react-typescript-webpack.git
  2. Change the current working directory to the project:

    cd react-typescript-webpack
  3. Install dependencies:

    [ yarn or npm install ]
  4. At this point you can run npm run dev or yarn dev to run project with development mode

    Now, your browser will auto open at http://127.0.0.1:3000

For Production:

  1. Run command to build:

    [ yarn or npm run ] build
  2. Setup env for production mode by create new file .env.production

  3. Run project at build directory

    • Using pm2: [ yarn or npm run ] start-pm2
    • Run with terminal: [ yarn or npm run ] start

Features

  • React hook
  • Webpack 5
  • Typescript
  • Sass
  • Redux-thunk
  • Redux-saga
  • Jest
  • Axios
  • I18n
  • React-router
  • Alias
  • Hot reload
  • Eslint
  • Prettier and Husky

How to using

  • Router:

    • Create new feature at src/features/

    • Create a route.ts inside src/features/ and export default an array match with rules:

      import { lazy } from 'react';
      const Component = lazy(() => import('./path-to-component'));
      
      export default [
        {
          /*
           * name of a route
           * using to apply key react when generate routes
           * required for declare
           */
          name: 'name',
          /*
           * path of route
           */
          path: '/path-name',
          /*
           * using as exact in react-router
           */
          exact: true,
          /*
           * dynamic render layout for each route
           * header: false -> route will auto hide header
           * if this rendered, don't need to declare
           * control this inside `src/store/slices/layoutSlice` with more section
           */
          layout: {
            header: false,
            footer: false,
          },
          /*
           * component rendered inside route
           */
          component: Component,
        },
      ];

      - You don't need do anything else after create and modify route.ts because i'm using import-glob to auto import (check at webpack/webpack.common.js for plugin, src/router/index.ts and src/layouts/main/index.tsx for using).

      - If you don't want to use auto import or using project with jest, just using the code that i'm commented. Because i'm not yet support auto import for jest.

  • Write new component

    • Create new folder at src/components/

    • Create an index.tsx and .scss

      - Don't need import scss into component, It will already merged into App.scss after you restart server.

      - This is a feature by using import-glob (check at webpack/webpack.common.js for plugin and src/styles/App.scss for using)

      - You should use BEM to write css without conflict

  • Using i18n

    • Create new json file at src/locales/resources/.json

    • Add content follow this format into json file

      {
        "en": {
          "name": "Name"
        },
        "vi": {
          "name": "Tên"
        }
      }
    • update src/locales/resources/index.ts like this:

      /*
       * you can use other name instead `user`
       * this name will be used as path to key
      */
      import user from './.json
      
      const mergeResource: IResource = {
        ..., // others json
        user
      };
    • Now inside any where, you can access to key like this:

        const { t } = useTranslation()
      
        t('user.name') will be render "Name" for `en` and "Tên" for `vi`

Tips

  • Go to .huskyinstall, remove comment at line 37 and run [yarn or npm install] again to apply run test when using git push origin [ branch ]
  • Go to config/@types/[any-file-name].d.ts to declare global type of typescript
  • Go to pm2/prod.json and change "name: react-webpack-typescript-starter ->[other-name]" to config pm2 app name
  • Go to components/spinner/index.tsx and modify jsx + css to use another loading

Carefully

  • Don't create folder with the PascalCase. Because it will throw error when build prod at ubuntu. I will fix it later or happy if you have a PR to fix it.
    Module not found: Error: Can't resolve '@/path-to-pascal-case' in '/path-to-lower-case'

Other References

License

This project is licensed under the MIT license, Copyright (c) 2021 Aldenn. For more information see LICENSE.md.

You might also like...
This project serves as a simple boilerplate to start building an isomorphic rendering application in React and Redux.
This project serves as a simple boilerplate to start building an isomorphic rendering application in React and Redux.

Isomorphic Redux App This project serves as a simple boilerplate to start building an isomorphic rendering application in React and Redux. # Features

A starter code to start the project built with Laravel 9 + InertiaJs + ReactJs
A starter code to start the project built with Laravel 9 + InertiaJs + ReactJs

This is a starter code to start the project built with Laravel 9 + InertiaJs + ReactJs, which already includes multiple layout admin templates with login for authentication

Start your development with a Free Tailwind CSS and NextJS UI Kit and Admin.
Start your development with a Free Tailwind CSS and NextJS UI Kit and Admin.

Notus NextJS A beautiful UI Kit and Admin for Tailwind CSS and NextJS. Start your development with a Free Tailwind CSS and NextJS UI Kit and Admin. Le

This boilerplate is meant to be a quick start for creating chrome extensions using React, Typescript and Tailwind CSS.

This boilerplate is meant to be a quick start for creating chrome extensions using React, Typescript and Tailwind CSS.

A template repo for creating react-ts apps based on vite. Libs like axios, antd, @apollo/client, eslint, stylelint, react-router-dom and @syy11cn/config-router are pre-installed.
A template repo for creating react-ts apps based on vite. Libs like axios, antd, @apollo/client, eslint, stylelint, react-router-dom and @syy11cn/config-router are pre-installed.

Template Repo for React + Typescript + Vite Introduction This is a template repo for projects built with react and typescript on the basis of vite. Fe

Berry free react material-ui admin template for easing and faster web development.
Berry free react material-ui admin template for easing and faster web development.

Berry is a creative free react admin template build using the Material-UI. It is meant to be the best User Experience with highly customizable feature-riched pages. It is a complete game-changer React Dashboard Template with easy and intuitive responsive design as on retina screens or laptops.

A library to help you prototype React apps faster

Substantiate A library to help you prototype React apps faster. It is a standard React reducer with four extra properties: Takes a query function. Thi

Javascript Explorer Playground do Start Tech React
Javascript Explorer Playground do Start Tech React

Bem-vinde ao JEP! JavaScript Explorer Playground (JEP) é um explorador virtual voltado para o aprendizado da linguagem JavaScript (ECMAScript). Ideali

Releases(v0.0.5)
Storybook-addon-next - A no config Storybook addon that makes Next.js features just work in Storybook

Storybook Addon Next ?? No config support for Next.js: Tired of writing and debu

Ryan Clements 188 Nov 28, 2022
A cli tool to generate cra-template from current create-react-app project.

Create Cra Template A cli tool to generate cra-template from current create-react-app project. Create Cra Template Templates cra-template-popular cra-

Yoki 23 Aug 18, 2022
Use TypeScript, TailwindCSS & Sass to quick start your new Next.js app!!

Next.js TypeScript TailwindCSS & Sass Starter Use TypeScript, TailwindCSS & Sass to quick start your new Next.js app!! ⚡️ Quick Start ?? Getting Start

MikevPeeren 20 Nov 7, 2022
Opinionated React app boilerplate in TypeScript, based on CRA.

Marvin ⭑⭑ (deprecated) Deprecation Notice The first version of Marvin was released in 2016. After more than four years, we have taken the decision to

Work & Co 773 Nov 8, 2022
This is a very simple boilerplate made with CRA, React Router, Styled Components and Storybook.

This is a Create React App boilerplate with some configurations from React Avançado Course. What is inside? This project uses lot of stuff as: Create

React Avançado 20 Jul 3, 2022
A simple demo to show the boilerplate-cra from React Avançado

This is a Create React App boilerplate with some configurations from React Avançado Course. What is inside? This project uses lot of stuff as: Create

Willian Justen 10 Oct 26, 2022
A handmade create-react-app to study how CRA works

This project was to learn how create-react-app (CRA) works under the hood, creating a very simple build project, using only the absolutely necessary.

Jéssica Félix 7 Jul 2, 2022
React.JS custom Boilerplate with CRA

React.JS custom Boilerplate with CRA

Mohammad Javad Soleymani Fard 5 Jul 17, 2022
🌏 Create React App companion for universal app. No eject, auto SSR, zero config, full HMR, and more (inactive project)

cra-universal Create React App Universal CLI Create React App companion for universal app. No eject, zero config with customization, supports string a

Antony Budianto 430 Nov 29, 2022
🥄 Develop, test and document your React story components faster.

Ladle is an environment to develop, test, and share your React components faster. Documentation Demo Twitter StackBlitz Discord Quick start mkdir my-l

Vojtech Miksu 1.8k Dec 3, 2022