GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects โ†’ aeksco โ†’ React Typescript Web Extension Starter

aeksco / React Typescript Web Extension Starter

Licence: mit
๐Ÿ–ฅ A Web Extension starter kit built with React, TypeScript, SCSS, Storybook, Jest, EsLint, Prettier, Webpack and Bootstrap. Supports Google Chrome + Mozilla Firefox + Brave Browser ๐Ÿ”ฅ

Programming Languages

javascript
184084 projects - #8 most used programming language
typescript
32286 projects

Labels

reactwebpackbootstrapscsschrome-extensionjesteslintstorybookprettiergoogle-chrome

Projects that are alternatives of or similar to React Typescript Web Extension Starter

Express React Boilerplate
๐Ÿš€๐Ÿš€๐Ÿš€ This is a tool that helps programmers create Express & React projects easily base on react-cool-starter.
Stars: โœญ 32 (-93.73%)
Mutual labels:  webpack, eslint, prettier, jest, storybook
Simple React Calendar
A simple react based calendar component to be used for selecting dates and date ranges
Stars: โœญ 97 (-80.98%)
Mutual labels:  webpack, eslint, prettier, jest, storybook
React Redux Saga Starter
Basic, Opinionated starter kit for React+Redux+Redux Saga with support for SCSS CSS Modules, Storybook, JEST testing, and ESLint
Stars: โœญ 12 (-97.65%)
Mutual labels:  eslint, jest, scss, storybook
Serverless Typescript Starter
๐Ÿ—„๐Ÿ™…โ€โ™€๏ธ Deploy your next serverless JavaScript function in seconds
Stars: โœญ 653 (+28.04%)
Mutual labels:  webpack, eslint, prettier, jest
React Ssr Starter
All have been introduced React environment
Stars: โœญ 20 (-96.08%)
Mutual labels:  webpack, eslint, prettier, jest
react-component-library-lerna
Build your own React component library managed with lerna, presented with storybook and published in private npm registry.
Stars: โœญ 55 (-89.22%)
Mutual labels:  eslint, jest, prettier, storybook
Js Stack From Scratch
๐Ÿ› ๏ธโšก Step-by-step tutorial to build a modern JavaScript stack.
Stars: โœญ 18,814 (+3589.02%)
Mutual labels:  webpack, eslint, jest, bootstrap
Starter React Flux
Generate your React PWA project with TypeScript or JavaScript
Stars: โœญ 65 (-87.25%)
Mutual labels:  webpack, eslint, prettier, jest
Ifme
Free, open source mental health communication web app to share experiences with loved ones
Stars: โœญ 1,147 (+124.9%)
Mutual labels:  webpack, jest, scss, storybook
Mostly
They mostly come at night; mostly.
Stars: โœญ 78 (-84.71%)
Mutual labels:  webpack, eslint, prettier, jest
Js Stack Boilerplate
Final boilerplate code of the JavaScript Stack from Scratch tutorial โ€“
Stars: โœญ 145 (-71.57%)
Mutual labels:  webpack, eslint, jest, bootstrap
Reeakt
A modern React boilerplate to awesome web applications
Stars: โœญ 116 (-77.25%)
Mutual labels:  webpack, eslint, prettier, jest
100 Days Of Code Frontend
Curriculum for learning front-end development during #100DaysOfCode.
Stars: โœญ 2,419 (+374.31%)
Mutual labels:  webpack, eslint, jest, bootstrap
ying-template
่ฟ™ๆ˜ฏไธ€ไธชๅŸบไบŽ `webpack@^5.27.2` + `typescript@^4.2.3` + `@babel/core@^7.2.2` + `jest@^26.6.3` + `eslint@^7.22.0` ็š„ๅคš้กต้ข่„šๆ‰‹ๆžถใ€‚
Stars: โœญ 125 (-75.49%)
Mutual labels:  eslint, jest, prettier
eslint-config-adjunct
A reasonable collection of plugins to use alongside your main esLint configuration
Stars: โœญ 39 (-92.35%)
Mutual labels:  eslint, jest, prettier
nextjs-starter-kit
NextJS Starter Kit with Testing Frameworks and CI/CD
Stars: โœญ 30 (-94.12%)
Mutual labels:  eslint, jest, storybook
nextjs-baseweb
Slightly opinionated scaffold of Next.js and Base Web.
Stars: โœญ 46 (-90.98%)
Mutual labels:  eslint, jest, prettier
react16-seed-with-apollo-graphql-scss-router4-ssr-tests-eslint-prettier-docker-webpack3-hot
Seed to create your own project using React with Apollo GraphQL client
Stars: โœญ 19 (-96.27%)
Mutual labels:  eslint, jest, prettier
walrus
๐ŸŽ‰ Cli development framework.
Stars: โœญ 17 (-96.67%)
Mutual labels:  eslint, jest, prettier
React 2048 Game
๐ŸŽฎ A fancy 2048 game build with react, redux best practices.
Stars: โœญ 401 (-21.37%)
Mutual labels:  eslint, prettier, scss
View All Similar Projects โž”

GitHub stars GitHub watchers GitHub forks GitHub contributors MIT License GitHub issues GitHub last commit GitHub pull requests PR's Welcome

HitCount Tweet Twitter Follow

React TypeScript Web Extension Starter

๐Ÿ–ฅ A Web Extension starter kit built with React, TypeScript, SCSS, Storybook, EsLint, Prettier, Jest, Bootstrap,x & Webpack. Compatible with Google Chrome, Mozilla Firefox, and Brave.

Example Extension Popup

Getting Started

Run the following commands to install dependencies and start developing

yarn install
yarn dev

Scripts

  • yarn dev - run webpack in watch mode
  • yarn storybook - runs the Storybook server
  • yarn build - builds the production-ready unpacked extension
  • yarn test -u - runs Jest + updates test snapshots
  • yarn lint - runs EsLint
  • yarn prettify - runs Prettier
Loading the extension in Google Chrome

In Google Chrome, open up chrome://extensions in a new tab. Make sure the Developer Mode checkbox in the upper-right corner is turned on. Click Load unpacked and select the dist directory in this repository - your extension should now be loaded.

Installed Extension in Google Chrome

Loading the extension in Brave

In Brave, open up brave://extensions in a new tab. Make sure the Developer Mode checkbox in the upper-right corner is turned on. Click Load unpacked and select the dist directory in this repository - your extension should now be loaded.

Installed Extension in Brave

Loading the extension in Mozilla Firefox

In Mozilla Firefox, open up the about:debugging page in a new tab. Click the Load Temporary Add-on... button and select the manfiest.json from the dist directory in this repository - your extension should now be loaded.

Installed Extension in Mozilla Firefox

Notes

  • Includes ESLint configured to work with TypeScript and Prettier.

  • Includes tests with Jest - note that the babel.config.js and associated dependencies are only necessary for Jest to work with TypeScript.

  • Recommended to use Visual Studio Code with the Format on Save setting turned on.

  • Example icons courtesy of FontAwesome.

  • Microsoft Edge is not currently supported.

  • Includes Storybook configured to work with React + TypeScript. Note that it maintains its own webpack.config.js and tsconfig.json files. See example story in src/components/hello/__tests__/hello.stories.tsx

  • Includes a custom mock for the webextension-polyfill-ts package in src/__mocks__. This allows you to mock any browser APIs used by your extension so you can develop your components inside Storybook.

Example Storybook Setup

Built with

Misc. References

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].