Frontend Starter Toolkit
This starter toolkit is a good starting place for you if you are starting out with a React based project using Typescript. You can clone this repository and start using the project without having to worry about configuring tools and configurations.
This project uses React, Typescript, Babel (for transpiling TS), Webpack ,ESLint (for code checking), Prettier (for code formatting) and Jest (for testing).
If you are interested in learning about the configurations, then this project can be useful as well since all the configurations have been outlined as individual commits in the history of the project to make it easier to understand. We have also started writing posts explaining the configuration steps. You can read about the following posts:
- Configuring Typescript with Babel and Webpack
- Setting up ESLint for TypeScript
- How to setup Jest in a TypeScript, Babel and Webpack project
More posts will follow soon.
Running the project
You’ll need to have Node installed on your local development machine. You can then clone this repo
git clone --depth=1 https://github.com/saranshkataria/frontend-starter-toolkit.git <YOUR_PROJECT_NAME>
You can then start building your own project based on the project that gets cloned. You can also remove the remote to the repo to avoid accidentally pushing to it.
Once you have a copy of the project, you need to install the dependencies. Run the command
npm install or
yarn in the command line.
After that you can run one of the following commands in the command line:
yarn devto run a development server using webpack dev server. Each time you hit save, changes get hot reloaded using hot module replacement
yarn prodto create a production build
yarn prod:debugto run webpack in debug mode while using the production configuration
yarn dev:debugto run webpack in debug mode while using the development configuration
yarn lintfor running ESLint to type check your source code
yarn testfor running Jest to run your test cases
It is also recommended that you install the Prettier extension for your IDE/Editor since the project supports it out of the box. Prettier has also been integrated as a pre commit hook to ensure that all files are formatted correctly. If you are not sure about what prettier is, you can read more about it in this blog post about Prettier.