status-im
/
sticker-market-blog
mirror of https://github.com/status-im/sticker-market-blog.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity
2 Commits 3 Branches 0 Tags 584 KiB
JavaScript 98.3%
HTML 1.4%
CSS 0.3%
Go to file
Corey 211512807a include build files for embedding 2019-05-19 13:47:54 -04:00
__mocks__ initial commit 2019-05-19 08:48:03 -04:00
__tests__ initial commit 2019-05-19 08:48:03 -04:00
build include build files for embedding 2019-05-19 13:47:54 -04:00
src include build files for embedding 2019-05-19 13:47:54 -04:00
webpack initial commit 2019-05-19 08:48:03 -04:00
.browserslistrc initial commit 2019-05-19 08:48:03 -04:00
.eslintrc initial commit 2019-05-19 08:48:03 -04:00
.gitignore include build files for embedding 2019-05-19 13:47:54 -04:00
.prettierrc initial commit 2019-05-19 08:48:03 -04:00
CODE_OF_CONDUCT.md initial commit 2019-05-19 08:48:03 -04:00
CONTRIBUTING.md initial commit 2019-05-19 08:48:03 -04:00
LICENSE initial commit 2019-05-19 08:48:03 -04:00
babel.config.js initial commit 2019-05-19 08:48:03 -04:00
package.json initial commit 2019-05-19 08:48:03 -04:00
readme.md initial commit 2019-05-19 08:48:03 -04:00
renovate.json initial commit 2019-05-19 08:48:03 -04:00
setupTests.js initial commit 2019-05-19 08:48:03 -04:00
webpack.config.js initial commit 2019-05-19 08:48:03 -04:00

readme.md

Webpack react minimal boilerplate

dependencies dependencies

Minimal webpack and react boilerplate using latest version of react and babel as well as jest and enzyme for more details about technologies used. click with real time server changes ;)

check out Medium article for more details

Real time change

Table of contents

Project structure

Installation

Configuration

Technologies used

Project structure

build/
src/
|- index.jsx _______________________________ # Application entry 
|- App.jsx _________________________________ # Application init
|  |- Components/
|    |- hello-world/ 
|       |- index.jsx _______________________ # Sample component

webpack
|- paths.js ________________________________ # webpack paths needed
|- webpack.common.js _______________________ # common webpack config
|- webpack.dev.js __________________________ # development config
|- webpack.prod.js _________________________ # production config

Installation

1- Clone the boilerplate repo

git clone git@github.com:HashemKhalifa/webpack-react-boilerplate.git

2- yarn or npm install to install npm packages

3- start dev server using yarn start or npm start.

3- build and bundling your resources for production yarn build.

4- Unit testing will watch all your changes in the test files as well as create coverage folder for you. yarn test

Configuration

  • Webpack Config paths based on your file structure you can go to webpack/paths.js and modify the source and file names based on your need.
  • webpack/webpack.common.js config common webpack for both dev and production environments.
  • webpack/webpack.dev.js config webpack for dev environment.
  • webpack/webpack.prod.js config webpack for production environment.
  • /webpack.config.js main webpack config that merge common and webpack environment based config.
  • Enzyme config /setupTest.js here you will have all setup for enzyme to test your component.
  • Prettier config /.prettierc.
  • Browsers list config /.browserslistrc.

Technologies used