Skip to content

GrantBartlett/react-typescript-webpack-starter

Repository files navigation

logo

React TypeScript Webpack Starter

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

Features

  • Webpack 5 + HMR
  • TypeScript + React 18
  • 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.

Config Description
.browerslistrc Open .browserslist to configure Browser support for TypeScript + SCSS compiliation. Read more here about Browerslist. Defaults are set for last 2 versions, > 1% and IE 11.
outputConfig.destPath The folder in which you want your app to compile to. By default this is dist.
entryConfig Webpack Entry points, by default this will look for the TypeScript + SCSS entry point files. More info on Entry points here
copyPluginPatterns.patterns Configure folders you want copied over when compiling your app. Useful to copy over entire folder structures of images or fonts.
devServer Configure the Webpack development server. Enable https, specify a particular port, or host. More information on these options here
scssConfig.destFileName Specify the output for your css. E.g css/app.css
terserPluginConfig Full Terser config can be found here.

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