fdaciuk / workflow-reactjs Goto Github PK

View Code? Open in Web Editor NEW

146.0 19.0 51.0 530 KB

My workflow with ReactJS + Webpack 3+

HTML 1.88% JavaScript 97.22% CSS 0.90%

storybook workflow webpack workflow-reactjs boilerplate boilerplate-template reactjs react async-await dynamic-import

workflow-reactjs's Introduction

Workflow ReactJS

⚠️ Disclaimer

Instead of using this project, prefer better and modern alternatives

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

workflow-reactjs's People

Stargazers

Watchers

workflow-reactjs's Issues

Module build failed when starting (SyntaxError on index.js)

Hi! (-;
I'm having issues to start application.

I followed this steps:

Download repository (zip file)
Install dependencies: yarn
Run yarn start

But when I run yarn start I get this error:

I don't change anything. am I missing something?

Thank You!

Newbie questions

Hi Fernando, I use this as a ref for setting up my config. Good one. Thanks.
I have two questions.

There's an additional line if (module.hot) {}. How do you deal with this unnecessary code in production build? You remove it prod build manually?
There's another additional line import { AppContainer } from 'react-hot-loader', which is a standard of wrapping components if using RHL 3. Does it mean that the same lines go into production as well with 'react-hot-loader' as a dependency?

Kindly reply.

This project can't work, because react-hot-loader config error

Because package.json dependency "react-hot-loader": "next", react-hot-loader now in v4 beta, the current config can't work.
I try modify the config to fit react-hot-loader v4, but react-hot-loader still can't work.
Wish you fix it when you free.
thank you for this library, I learn much from it.(￣▽￣)~

help com o webpack-dev-server!

Olá Fernando,
Estou tendo um probleminha com o hot loader, recebo a mensagem "Error: Cannot find module 'webpack-dev-server'"

já tenho o webpack-dev-server instalado com a diretiva -g

Abaixo uma imagem do erro e o repositório que criei para estudar (https://github.com/allergictoeng/react-webpack), obrigado desde já e boa semana.

Observação

Olá Fernando.
Estou fazendo a aula "React + Webpack #6", e dentro do webpack.config.js:
No vídeo está:

loader: 'babel'

Entretanto para mim funcionou:

loader: 'babel-loader'

Não sei se mais tarde no curso há alguma explicação para isto, entretanto acredito que alguém pode ter o mesmo problema que o meu, peço desculpas se eu abri a Issue no repositório errado =)
Boa semana.

React hot loader isn't working properly

Hey @fdaciuk!

It looks like after the dependencies update the hot loader stopped working, did you noticed this?
Probably it's a dependency version problem, but not sure yet.
I'm trying to figure it out.

Sugestão - gerador de arquivos

Sugestão: usar o Slush para gerar os arquivos

Error regarding Node version

I tried to 'yarn' the package but got the following error:

error [email protected]: The engine "node" is incompatible with this module. Expected version ">=4 <=9".

I'm using Node 10.4. Would it be a nice PR if I try to get the things working in Node newer versions?
Or you already have a solution for this issue?

Dúvida

Fernando, ao invés de usar esse boilerplate eu posso usar CRA? Estou fazendo o Módulo 3 Aula 12 (M3#A12)