https://github.com/mikecann/typescript-react-hmr-chrome-extension-starter

How I want to build my chrome extensions
https://github.com/mikecann/typescript-react-hmr-chrome-extension-starter

Last synced: 18 days ago
JSON representation

How I want to build my chrome extensions

• Host: GitHub
• URL: https://github.com/mikecann/typescript-react-hmr-chrome-extension-starter
• Owner: mikecann
• Created: 2019-06-11T06:22:11.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T18:51:55.000Z (almost 2 years ago)
• Last Synced: 2024-10-03T09:18:45.467Z (about 1 month ago)
• Language: TypeScript
• Size: 4.21 MB
• Stars: 2
• Watchers: 1
• Forks: 1
• Open Issues: 20
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Typescript React HMR Chrome Extension Starter

A good modern starting point for building chrome extensions.

Getting HMR to work was a bit of a pain. For now I have locked `webpack-dev-server` to version 3.1.14 in `package.json`. This perhaps can change in the future.

## Technologies

Typescript, React, Webpack, Hot Module Replacement, React Hooks, Storybook, Prettier, Husky, Pretty Quick, E2E Testing via Puppeteer, Jest

## Gulp

Using gulp is perhaps an unusual choice for build tools in this day and age but IMO its still a good tool better than `nps` for more complex requirements such as building chrome extensions.

For best results install the gulp CLI globally:

`yarn global add gulp-cli`

Then you can explore the tasks you can run with:

`gulp --tasks`

.. and one one for example:

`gulp dev`

Dont be afraid of going in and changing things to how you like them. The starting point for all of this should be `scripts/index.ts`

## Prettier, Husky, Pretty-Quick

I prefer to use prettier over ts-lint or js-lint. I find those guys tend to get in the way too much. Prettier is simple and does everything I need. Setup your VS Code to format on every save, thank me later :)

I have added husky and pretty-quick in the mix so that prettier is run before each commit to enforce code standards.

## Storybook

This project supports storybook out of the gate. This is handy to develop your react components in isolation.

## Unit Tests

Unit tests are powered by Jest

`gulp runUnitTests` or `yarn unit`

## E2E Tests

E2E tests are powered by puppeteer. Over some time I have developed a good way of runnings these and have thus included my microframework in here to help with that.

`gulp runE2ETests` or `yarn e2e`

I am running a custom reporter that only logs if a test fails. You can disable this by commenting out the reporters in `jest.e2e.config.js`.

## Env Vars

To include an environment variable in the build it must start with `REACT_APP` and then it will automatically be included.

## Uploading

This package supports automatic uploading to the chrome webstore too. Look in `scripts/upload` for instructions on how to get the keys to make this work.