All Projects → fdaciuk → Workflow Reactjs

fdaciuk / Workflow Reactjs

My workflow with ReactJS + Webpack 3+

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Workflow Reactjs

Electron React Webpack Boilerplate
Minimal Electron, React, PostCSS and Webpack boilerplate to help you get started with building your next app.
Stars: ✭ 312 (+108%)
Mutual labels:  webpack, boilerplate-template, boilerplate
Frontend Webpack Boilerplate
Simple starter webpack 5 project template supporting SASS/PostCSS, Babel ES7, browser syncing, code linting. Easy project setup having multiple features and developer friendly tools.
Stars: ✭ 242 (+61.33%)
Mutual labels:  webpack, boilerplate-template, boilerplate
React Webpack 5 Tailwind 2
React 17 Boilerplate with Webpack 5, Tailwind 2, using babel, SASS/PostCSS, HMR, dotenv and an optimized production build
Stars: ✭ 155 (+3.33%)
Mutual labels:  webpack, boilerplate-template, boilerplate
React Redux Graphql Apollo Bootstrap Webpack Starter
react js + redux + graphQL + Apollo + react router + hot reload + devTools + bootstrap + webpack starter
Stars: ✭ 127 (-15.33%)
Mutual labels:  webpack, webpack3, boilerplate
Html Sass Babel Webpack Boilerplate
Webpack 4 + Babel + ES6 + SASS + HTML Modules + Livereload
Stars: ✭ 35 (-76.67%)
Mutual labels:  webpack, boilerplate-template, boilerplate
Preact Starter
Webpack3 boilerplate for building SPA / PWA / offline front-end apps with Preact
Stars: ✭ 384 (+156%)
Mutual labels:  webpack, webpack3, boilerplate
Baumeister
👷 The aim of this project is to help you to build your things. From Bootstrap themes over static websites to single page applications.
Stars: ✭ 171 (+14%)
Mutual labels:  webpack, boilerplate, workflow
Express React Boilerplate
🚀🚀🚀 This is a tool that helps programmers create Express & React projects easily base on react-cool-starter.
Stars: ✭ 32 (-78.67%)
Mutual labels:  webpack, boilerplate, storybook
Frontie Webpack
Front-end Boilerplate | Gulp 4 + Webpack 4 + Babel + ITCSS Architecture + BEM Methodology + Twig.js
Stars: ✭ 102 (-32%)
Mutual labels:  webpack, boilerplate, workflow
Iceberg
Front-End Boilerplate built with React + Babel + Webpack + SASS
Stars: ✭ 144 (-4%)
Mutual labels:  webpack, webpack3, boilerplate
Koa React Isomorphic
Boilerplate for Koa & React
Stars: ✭ 128 (-14.67%)
Mutual labels:  webpack, boilerplate
Workflow
一个工作流平台
Stars: ✭ 1,888 (+1158.67%)
Mutual labels:  webpack, workflow
React Boilerplate
React Boilerplate
Stars: ✭ 128 (-14.67%)
Mutual labels:  webpack, boilerplate
Mhy
🧩 A zero-config, out-of-the-box, multi-purpose toolbox and development environment
Stars: ✭ 128 (-14.67%)
Mutual labels:  webpack, storybook
Universal Native Boilerplate
Build apps for every native platform with React and React Native
Stars: ✭ 131 (-12.67%)
Mutual labels:  webpack, boilerplate
Webpack Starter
✨ A lightweight foundation for your next webpack based frontend project.
Stars: ✭ 1,745 (+1063.33%)
Mutual labels:  webpack, boilerplate
React Pages Boilerplate
Deliver react + react-router application to gh-pages
Stars: ✭ 134 (-10.67%)
Mutual labels:  webpack, boilerplate
Redux React Starter
DEPRECATED use the new https://github.com/didierfranc/react-webpack-4
Stars: ✭ 137 (-8.67%)
Mutual labels:  webpack, boilerplate
Eleventy Starter Boilerplate
🚀 Eleventy Starter is production-ready with SEO-friendly for quickly starting a blog. ⚡ Built with Eleventy, ESLint, Prettier, Webpack, PostCSS, Tailwind CSS and Netlify CMS (optional).
Stars: ✭ 139 (-7.33%)
Mutual labels:  webpack, boilerplate
Create Elm App
🍃 Create Elm apps with zero configuration
Stars: ✭ 1,650 (+1000%)
Mutual labels:  webpack, boilerplate

Workflow ReactJS

What's inside it?

  • Webpack 3+
  • Babel
  • React hot loader
  • HTML and CSS generated automatically by webpack
  • Jest for tests and Chai for assertions
  • Storybook to create isolatelly components' stories
  • Async/await
  • Dynamic import() function
  • Webpack tree shaking!
  • Preact for production build (optional)

Dependencies:

  • Node.js >= v6;

Up and running

  • Clone this repository: git clone [email protected]:fdaciuk/workflow-reactjs.git;
  • Remove .git directory;
  • Install dependencies: yarn (or npm i);
  • Run yarn dev (or npm start) to develop on http://localhost:3000
  • Run yarn build (or npm run build) for production build (files will be generated on dist directory)

Troubleshooting

If you are on Windows, and try to run yarn lint, you'll get an error because spawn module does not work very well on Windows.

You should install cross-spawn, and edit gulpfile.js, removing line 4 and uncomment line 7.

A big thanks to @hgtpcastro for this tip.

Scripts

  • yarn dev (or npm run dev): Starts the application on development mode
  • yarn test (or npm test): Run tests once
  • yarn test:watch (or npm run test:watch): Run tests in watch mode
  • yarn build (or npm run build): Build project to production
  • yarn build:analyzer (or npm run build:analyzer): Build project to production and open bundle analyzer on 8888 port
  • yarn storybook (or npm run storybook): Run Storybook on 6006 port
  • yarn storybook:build: Build Storybook to static files
  • yarn update-packages: Update all packages to the latest version
  • yarn start (or npm start): Special script reserved to run production code. Change as you wish. For now, it is the same as yarn dev.

License

MIT © Fernando Daciuk

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].