React TypeScript Webpack Starter

A starter project for using React, TypeScript, SCSS and Webpack.

Features

• Webpack 5 + HMR
• TypeScript + React
• SCSS + Autoprefixing

🚀 Getting Started

Get up and running with these simple steps:

1. Clone the project
2. Run npm install
3. Run npm run dev

Class & Functional stubs

In the master branch you can find the class based starter. In the branch functional you can find the functional based starter.

Configuration

Optional configuration for the project can be done in the following files below.

Open env.config.js and you will see the default configuration for the project.

Images, Fonts and output

Here's an example of the default generated output to our dist folder.

- index.html
-- js
-- css
-- fonts
---- some-font-file.woff
-- images
---- path-to-example-image.jpg

• By default, fonts and images are copied to the dist folder.
• To include a reference to an image or font, it should be relative to where your css would output.

For example:

stylesheets/some-folder/some-file-somewhere.scss

.example {
    background-image: url("../images/path-to-image-example.jpg");
}

@font-face {
    font-family: "Example-font";
    src: url("../fonts/some-font-file.woff");
}

Would output to the folder css/app.css

- index.html
-- js
-- css
---- app.css
-- fonts
---- some-font-file.woff
-- images
---- path-to-example-image.jpg

Development

npm install
npm run dev

Production

Note: This will compile to a dist folder.

npm run build

Build tools

• React - JavaScript library for building user interfaces.
• TypeScript - TypeScript is a superset of JavaScript that compiles to clean JavaScript.
• Webpack 5 - App bundler for JavaScript.
• SCSS - Preprocessor for SCSS to CSS.

📝License

This project is licensed under the MIT License - see the LICENSE.md file for details