8 ms·

React-boilerplate: setup for performance orientated, offline-first React.js apps

154 points by tilt 11y ago

nanoojaboo 11y ago
It has two webpack configs (one for dev, one for production), how do you indicate which one you are using when you run webpack?
- hakanito 11y ago
  Check the package.json, there are several npm scripts. The author of this library probably wants you to run `npm run start` for development and `npm run serve` for production
- callumlocke 11y ago
  Development: npm start Production: npm run build
- mxstbr 11y ago
  hakanito is spot on, I just wanted to add that there's a COMMANDS.md[0] with all the possible npm commands! I take care of running webpack with the right envs, linting and building your application, you use the npm commands and write a great app! [0]: See: https://github.com/mxstbr/react-boilerplate/blob/master/docs/COMMANDS.md https://github.com/mxstbr/react-boilerplate/blob/master/docs...
- brianzelip 11y ago
  It's worth noting here that "production" is not for literally serving your app. Rather it's used here to provide a production-like build of your app that can be tested on multiple devices before actually deploying it online.
bahador 11y ago
What does "performance orientated" mean?
- simple10 11y ago
  I think performance is referring to apps that load fast (server side rendering + AppCache + hot module loading) and using service workers for keeping the main thread running fast.
  - wanda 11y ago
    Service workers or web workers?
    - skulbuny 11y ago
      simple10 said service works and the repo that we're all discussing mention only service workers. I think it'd be safe to assume we're all talking about service workers.
  - mxstbr 11y ago
    Actually, there's no server side rendering in this boilerplate yet. It wouldn't be hard to integrate, I didn't want to alienate the front-end devs who are front-end only and don't want to take care of server stuff. Might have to revisit that again though...
- mxstbr 11y ago
  I use FontFaceObserver (lazy web font loading), minify everything, keep the HTTP requests to a minimum (I'll have to look at that though, now that HTTP/2 is up and coming...), use AppCache and ServiceWorker to make repeat visits almost instant,... If you have any other ideas how to make this boilerplate even more performance orientated, hmu!
  - ChrisCinelli 11y ago
    Isomorphic/universal Javascript will insure to have an app SEO friendly and fast rendering times on first visits.
    - gildas 11y ago
acjohnson55 11y ago
I'm working on an app now that started from a similar boilerplate. The React+Redux ecosystem is very exciting right now. Both of those libraries are brilliant in their elegance,and the ecosystem is a testament to that. On the other hand, the fact that apps end up being a stack of loosely integrated libraries can make the process of developing in the ecosystem rather overwhelming. It's hard to keep up with the progression of microlibraries and features. One thing's for sure though: it's a fun time to be a Web developer.
- firasd 11y ago
  Along the same lines, I was making a web app with React and found that while the ability to be creative in putting together components is exciting, I'd like a more integrated stack I can reuse for other apps. While I haven't tried it out yet, it seems that Meteor is pretty close to what I think of as ideal, and the news that they are going to integrate React is great. (Now if only they announced native RDMBS support. Also, I care about server-side rendering and would have to double-check whether that's possible in Meteor.)
  - Secretmapper 11y ago
    They already integrated React in! SSR is possible with a few packages. RDBMS is where you got me :)
  - MatthewPhillips 11y ago
    DoneJS[1] a fully integrated solution that's still modular (you can use only parts of it if you want). It also has the most full-featured SSR solution of any framework out there (even goes as far as to include the correct CSS for a given page). [1] http://donejs.com/ http://donejs.com/
- mxstbr 11y ago
  That's exactly why I first shared this boilerplate. I take care of keeping up and giving you the very best developer experience possible at the time, and you take care of writing great apps! v3[0] will make this seperation even more pronounced, with a new application structure that hides a lot of the magic and gets out of the way. [0]: https://github.com/mxstbr/react-boilerplate/tree/v3.0.0 https://github.com/mxstbr/react-boilerplate/tree/v3.0.0
simple10 11y ago
Does anyone have a growing list of popular React boilerplates? https://github.com/erikras/react-redux-universal-hot-example https://github.com/erikras/react-redux-universal-hot-example https://github.com/mxstbr/react-boilerplate https://github.com/mxstbr/react-boilerplate
- dexwiz 11y ago
  https://github.com/xgrommx/awesome-redux#boilerplate https://github.com/xgrommx/awesome-redux#boilerplate
  - gpmcadam 11y ago
    Maybe non-redux-specific would be useful, too? https://github.com/xgrommx/awesome-react#boilerplates https://github.com/xgrommx/awesome-react#boilerplates
- elwell 11y ago
  React Native w/ Reagent https://github.com/drapanjanas/re-natal https://github.com/drapanjanas/re-natal
- novaleaf 11y ago
  my problem with all these boilerplate is their reliance on tangential technologies. (Babel/Webpack/MaterialUi/etc). Unbundling these takes a lot of effort, and for me, probably more than the gain from using the boilerplate in the first place.
  - mxstbr 11y ago
    The whole point of a boilerplate (for me) is that you don't have to care about those tangential technologies. I take care of setting up Babel and Webpack with hot-reloading, add linting rules that make sense, write a working ServiceWorker script, etc., so you only have to worry about writing your application. * Disclaimer: I made the boilerplate this post is about.
    - 11y ago
hoodoof 11y ago
There really should be a "this month's boilerplate/starter kit" site that has a starter kit using the current state of the art technology set. Whilst this comment might sound facetious, it isn't intended to be. The JavaScript ecosystem moves quickly and starter kits are outdated almost immediately as the JS world develops better ways to do things. At any given month there tends to be a community accepted (to a greater or lesser extent) set of technologies that are the "current best". It would be great to be able to go there and pick up a "January 2016" ReactJS starter kit built around the "current best". Another related idea is a website listing JavaScript technologies and every month a new poll shows how many people favor one technology over another. Or a list that allows people to use checkboxes to select the JS technologies, with a grid showing which starter kits use that tech.
- zastavka 11y ago
  > Whilst this comment might sound facetious, it isn't intended to be. Yep, it's dizzying how fast the JS ecosystem is changing; hell, even just the React ecosystem on its own. I went back to a React-based side project I had been working on at the beginning of this year to try to get it up to date with current best practices and tooling, and SO much has changed (Babel/ES6, Webpack, the maturation of the Flux pattern, the React/React DOM split, etc) that I've decided to rewrite it more or less from scratch. I don't even need a lot of the stuff this particular boilerplate kit has, as my app is designed to run as a static site on Github pages, but having one place to go just to find out what libraries and practices are currently considered the state of the art (or flavor of the month, depending on your level of cynicism) would be wonderful. Them's the breaks, I guess.
  - narrator 11y ago
    Rewriting a side project app with the latest boilerplate generator and toolkit, IMHO, is an obsession that is just a great way to avoid doing work. There comes a point in a side project where it gets too big for the usual sole developer to deal with and they think, "If I just upgrade to the next magic stack I'll be able to manage this complexity." What's usually happened is that the QA load for adding new features has gotten too high and the usually sole developer can't add new features to anything without breaking stuff and at least going through a long test cycle. With a larger team, QA can help patch up the holes. However, if a project has solid TDD, this doesn't become a problem because, if the tests all pass, everything works. Just my two cents, but that was my experience before I got really into TDD.
rdoherty 11y ago
Related to this, how would someone who has existing websites built with various other libraries start a migration to React? I have a lot of legacy YUI code in a Rails app (using Rails' asset pipeline) that I want to rewrite. Anyone have resources on how to get setup and refactor in pieces?
- firasd 11y ago
  You can just start writing JS on an existing page to output components rendered by React. Fair warning though, React is focused on rendering and initializing, so it doesn't come with a bunch of handy JS functions like YUI or jQuery. But you can use React & other JS libs together, as long as you're careful that the other JS lib doesn't change the markup of a React component (which would take it out of sync.)
- mercurial 11y ago
  I'm doing exactly that at work. When you write React code (whether for a single-page React application or a mostly-legacy application), there is a point where you need to tell React to start rendering a root component inside a given, existing DOM element. Your legacy application should NOT mess with anything under this DOM element, as this will be solely managed by React. However, it is entirely possible to have several of these root components on the same HTML page. It makes it possible to refactor a complex page progressively. You're still going to run into issues if you need communication between legacy and Reactified UI elements, though. You will need to setup, eg, listeners manually. In the case where you need to update parts of a form, just tell your React store to write to hidden input fields instead of doing Ajax with the server.
- 1stop 11y ago
  One approach would be to rewrite each page completely in react. Using the Rails app as an API.
mxstbr 11y ago
Hey everybody, I'm the main contributor behind this boilerplate. I'm currently hard at work getting v3 out, which you can see in the v3.0.0[0] branch of the repo. The biggest changes are: A new application structure to keep most of the webpack magic hidden from users, stateless components across the board, a npm run pagespeed command and much better documentation. This was posted while I was sleeping (thanks tilt!), so I'll go through this thread to answer any questions/concerns. If you can think of any more questions you have, reply to this comment so I get a notification! Cheers! Minor Edit: You can also follow me on twitter[1] under the same handle stay up to date with changes to the boilerplate! [0]: https://github.com/mxstbr/react-boilerplate/tree/v3.0.0 https://github.com/mxstbr/react-boilerplate/tree/v3.0.0 [1]: https://twitter.com/mxstbr https://twitter.com/mxstbr
- hoodoof 11y ago
  Is your webpack config compatible with Windows? Most of them set environment variables in a way that is not cross platform.
  - mxstbr 11y ago
    I honestly haven't tried it, that's a very very good point. How would I set them so it works on Windows as well? I'll change it asap!
    - mg74 11y ago
      If you want to do Windows, consider using https://github.com/kentcdodds/argv-set-env https://github.com/kentcdodds/argv-set-env for a cross-platform solution to setting enviroment variables
      - mxstbr 11y ago
        Thanks, it's now fixed for the master branch using kentcdodds/cross-env.[0] [0]: See this commit: https://github.com/mxstbr/react-boilerplate/commit/ea57943338c47c673a8a1d815fee0b5f8f3bfc84 https://github.com/mxstbr/react-boilerplate/commit/ea5794333...
gravypod 11y ago
I think I see a slight problem here. Should we not consider the fact that we, seemingly, need all of this to start a project? I feel that simplicity, and ease of use should rain supreme over features. The fact that this takes such a huge amount of other files to setup worries me. Am I the only one with this concern?
- morgante 11y ago
  You absolutely don't need all of this to start a project. It's perfectly possible to start using React without any sort of build tools, boilerplate, or additions. It's just that these additions are things you end up wanting once a project grows, so you might as well start with them.
- mxstbr 11y ago
  I'd like to add to morgante's excellent comment: You don't need any of these things, but they make it so much nicer and easier to write an application. You can easily write a React app without them, but it's less fun and it takes more time. The point of the boilerplate is to let you focus on writing your application, and let the boilerplate take care of making that experience a very nice one.

154 points by tilt 11y ago

It has two webpack configs (one for dev, one for production), how do you indicate which one you are using when you run webpack?

hakanito 11y ago
Check the package.json, there are several npm scripts. The author of this library probably wants you to run `npm run start` for development and `npm run serve` for production
callumlocke 11y ago
Development: npm start Production: npm run build
mxstbr 11y ago
hakanito is spot on, I just wanted to add that there's a COMMANDS.md[0] with all the possible npm commands! I take care of running webpack with the right envs, linting and building your application, you use the npm commands and write a great app! [0]: See: https://github.com/mxstbr/react-boilerplate/blob/master/docs/COMMANDS.md https://github.com/mxstbr/react-boilerplate/blob/master/docs...
brianzelip 11y ago
It's worth noting here that "production" is not for literally serving your app. Rather it's used here to provide a production-like build of your app that can be tested on multiple devices before actually deploying it online.

bahador 11y ago

What does "performance orientated" mean?

simple10 11y ago
I think performance is referring to apps that load fast (server side rendering + AppCache + hot module loading) and using service workers for keeping the main thread running fast.
- wanda 11y ago
  Service workers or web workers?
  - skulbuny 11y ago
    simple10 said service works and the repo that we're all discussing mention only service workers. I think it'd be safe to assume we're all talking about service workers.
- mxstbr 11y ago
  Actually, there's no server side rendering in this boilerplate yet. It wouldn't be hard to integrate, I didn't want to alienate the front-end devs who are front-end only and don't want to take care of server stuff. Might have to revisit that again though...
mxstbr 11y ago
I use FontFaceObserver (lazy web font loading), minify everything, keep the HTTP requests to a minimum (I'll have to look at that though, now that HTTP/2 is up and coming...), use AppCache and ServiceWorker to make repeat visits almost instant,... If you have any other ideas how to make this boilerplate even more performance orientated, hmu!
- ChrisCinelli 11y ago
  Isomorphic/universal Javascript will insure to have an app SEO friendly and fast rendering times on first visits.
  - gildas 11y ago

acjohnson55 11y ago

I'm working on an app now that started from a similar boilerplate. The React+Redux ecosystem is very exciting right now. Both of those libraries are brilliant in their elegance,and the ecosystem is a testament to that. On the other hand, the fact that apps end up being a stack of loosely integrated libraries can make the process of developing in the ecosystem rather overwhelming. It's hard to keep up with the progression of microlibraries and features. One thing's for sure though: it's a fun time to be a Web developer.

firasd 11y ago
Along the same lines, I was making a web app with React and found that while the ability to be creative in putting together components is exciting, I'd like a more integrated stack I can reuse for other apps. While I haven't tried it out yet, it seems that Meteor is pretty close to what I think of as ideal, and the news that they are going to integrate React is great. (Now if only they announced native RDMBS support. Also, I care about server-side rendering and would have to double-check whether that's possible in Meteor.)
- Secretmapper 11y ago
  They already integrated React in! SSR is possible with a few packages. RDBMS is where you got me :)
- MatthewPhillips 11y ago
  DoneJS[1] a fully integrated solution that's still modular (you can use only parts of it if you want). It also has the most full-featured SSR solution of any framework out there (even goes as far as to include the correct CSS for a given page). [1] http://donejs.com/ http://donejs.com/
mxstbr 11y ago
That's exactly why I first shared this boilerplate. I take care of keeping up and giving you the very best developer experience possible at the time, and you take care of writing great apps! v3[0] will make this seperation even more pronounced, with a new application structure that hides a lot of the magic and gets out of the way. [0]: https://github.com/mxstbr/react-boilerplate/tree/v3.0.0 https://github.com/mxstbr/react-boilerplate/tree/v3.0.0

simple10 11y ago

Does anyone have a growing list of popular React boilerplates? https://github.com/erikras/react-redux-universal-hot-example https://github.com/erikras/react-redux-universal-hot-example https://github.com/mxstbr/react-boilerplate https://github.com/mxstbr/react-boilerplate

dexwiz 11y ago
https://github.com/xgrommx/awesome-redux#boilerplate https://github.com/xgrommx/awesome-redux#boilerplate
- gpmcadam 11y ago
  Maybe non-redux-specific would be useful, too? https://github.com/xgrommx/awesome-react#boilerplates https://github.com/xgrommx/awesome-react#boilerplates
elwell 11y ago
React Native w/ Reagent https://github.com/drapanjanas/re-natal https://github.com/drapanjanas/re-natal
novaleaf 11y ago
my problem with all these boilerplate is their reliance on tangential technologies. (Babel/Webpack/MaterialUi/etc). Unbundling these takes a lot of effort, and for me, probably more than the gain from using the boilerplate in the first place.
- mxstbr 11y ago
  The whole point of a boilerplate (for me) is that you don't have to care about those tangential technologies. I take care of setting up Babel and Webpack with hot-reloading, add linting rules that make sense, write a working ServiceWorker script, etc., so you only have to worry about writing your application. * Disclaimer: I made the boilerplate this post is about.
  - 11y ago

hoodoof 11y ago

There really should be a "this month's boilerplate/starter kit" site that has a starter kit using the current state of the art technology set. Whilst this comment might sound facetious, it isn't intended to be. The JavaScript ecosystem moves quickly and starter kits are outdated almost immediately as the JS world develops better ways to do things. At any given month there tends to be a community accepted (to a greater or lesser extent) set of technologies that are the "current best". It would be great to be able to go there and pick up a "January 2016" ReactJS starter kit built around the "current best". Another related idea is a website listing JavaScript technologies and every month a new poll shows how many people favor one technology over another. Or a list that allows people to use checkboxes to select the JS technologies, with a grid showing which starter kits use that tech.

zastavka 11y ago
> Whilst this comment might sound facetious, it isn't intended to be. Yep, it's dizzying how fast the JS ecosystem is changing; hell, even just the React ecosystem on its own. I went back to a React-based side project I had been working on at the beginning of this year to try to get it up to date with current best practices and tooling, and SO much has changed (Babel/ES6, Webpack, the maturation of the Flux pattern, the React/React DOM split, etc) that I've decided to rewrite it more or less from scratch. I don't even need a lot of the stuff this particular boilerplate kit has, as my app is designed to run as a static site on Github pages, but having one place to go just to find out what libraries and practices are currently considered the state of the art (or flavor of the month, depending on your level of cynicism) would be wonderful. Them's the breaks, I guess.
- narrator 11y ago
  Rewriting a side project app with the latest boilerplate generator and toolkit, IMHO, is an obsession that is just a great way to avoid doing work. There comes a point in a side project where it gets too big for the usual sole developer to deal with and they think, "If I just upgrade to the next magic stack I'll be able to manage this complexity." What's usually happened is that the QA load for adding new features has gotten too high and the usually sole developer can't add new features to anything without breaking stuff and at least going through a long test cycle. With a larger team, QA can help patch up the holes. However, if a project has solid TDD, this doesn't become a problem because, if the tests all pass, everything works. Just my two cents, but that was my experience before I got really into TDD.

rdoherty 11y ago

Related to this, how would someone who has existing websites built with various other libraries start a migration to React? I have a lot of legacy YUI code in a Rails app (using Rails' asset pipeline) that I want to rewrite. Anyone have resources on how to get setup and refactor in pieces?

firasd 11y ago
You can just start writing JS on an existing page to output components rendered by React. Fair warning though, React is focused on rendering and initializing, so it doesn't come with a bunch of handy JS functions like YUI or jQuery. But you can use React & other JS libs together, as long as you're careful that the other JS lib doesn't change the markup of a React component (which would take it out of sync.)
mercurial 11y ago
I'm doing exactly that at work. When you write React code (whether for a single-page React application or a mostly-legacy application), there is a point where you need to tell React to start rendering a root component inside a given, existing DOM element. Your legacy application should NOT mess with anything under this DOM element, as this will be solely managed by React. However, it is entirely possible to have several of these root components on the same HTML page. It makes it possible to refactor a complex page progressively. You're still going to run into issues if you need communication between legacy and Reactified UI elements, though. You will need to setup, eg, listeners manually. In the case where you need to update parts of a form, just tell your React store to write to hidden input fields instead of doing Ajax with the server.
1stop 11y ago
One approach would be to rewrite each page completely in react. Using the Rails app as an API.

mxstbr 11y ago

Hey everybody, I'm the main contributor behind this boilerplate. I'm currently hard at work getting v3 out, which you can see in the v3.0.0[0] branch of the repo. The biggest changes are: A new application structure to keep most of the webpack magic hidden from users, stateless components across the board, a npm run pagespeed command and much better documentation. This was posted while I was sleeping (thanks tilt!), so I'll go through this thread to answer any questions/concerns. If you can think of any more questions you have, reply to this comment so I get a notification! Cheers! Minor Edit: You can also follow me on twitter[1] under the same handle stay up to date with changes to the boilerplate! [0]: https://github.com/mxstbr/react-boilerplate/tree/v3.0.0 https://github.com/mxstbr/react-boilerplate/tree/v3.0.0 [1]: https://twitter.com/mxstbr https://twitter.com/mxstbr

hoodoof 11y ago
Is your webpack config compatible with Windows? Most of them set environment variables in a way that is not cross platform.
- mxstbr 11y ago
  I honestly haven't tried it, that's a very very good point. How would I set them so it works on Windows as well? I'll change it asap!
  - mg74 11y ago
    If you want to do Windows, consider using https://github.com/kentcdodds/argv-set-env https://github.com/kentcdodds/argv-set-env for a cross-platform solution to setting enviroment variables
    - mxstbr 11y ago
      Thanks, it's now fixed for the master branch using kentcdodds/cross-env.[0] [0]: See this commit: https://github.com/mxstbr/react-boilerplate/commit/ea57943338c47c673a8a1d815fee0b5f8f3bfc84 https://github.com/mxstbr/react-boilerplate/commit/ea5794333...

gravypod 11y ago

I think I see a slight problem here. Should we not consider the fact that we, seemingly, need all of this to start a project? I feel that simplicity, and ease of use should rain supreme over features. The fact that this takes such a huge amount of other files to setup worries me. Am I the only one with this concern?

morgante 11y ago
You absolutely don't need all of this to start a project. It's perfectly possible to start using React without any sort of build tools, boilerplate, or additions. It's just that these additions are things you end up wanting once a project grows, so you might as well start with them.
mxstbr 11y ago
I'd like to add to morgante's excellent comment: You don't need any of these things, but they make it so much nicer and easier to write an application. You can easily write a React app without them, but it's less fun and it takes more time. The point of the boilerplate is to let you focus on writing your application, and let the boilerplate take care of making that experience a very nice one.