7 ms·
Show HN: Reactpack – one command to build your React front end
- ola 10y agoJust a small utility for people who are tired of remembering what babel presets or Webpack loaders they need to build a relatively up to date React project.
- underwires 10y agoThe diagram here shows a real talent for explaining complex processes in a way that even a two year old could understand.
- ola 10y agoThank you :) I made it in gnome-paint, the shrubbery symbolizes okayish development practices.
- ajacksified 10y agoLooks good! We've been working on something similar at reddit, https://github.com/reddit/node-build https://github.com/reddit/node-build, to solve the same issue. It has defaults for react/es6, and I'm also using it without react for building es6 libraries for NPM distribution.
- dakami 10y agowas that...like...a hundred megs for a web page?
- Zikes 10y ago177 modules for a Hello World page? Is this satire?
- untog 10y agoSigh, that's an absurd way to measure. A "Hello world" is just that: a demo. No-one is: 1) actually making Hello, World pages that will go anywhere near a user 2) Using React in Hello, World pages (which they don't make) 3) Using Reactpack to build the React-based Hello World pages they aren't making
- Zikes 10y agoIt's not absurd because: 1) Whatever you're making, you're starting out with 177 modules minimum if you use React + Reactpack. 2) See 1.
- untog 10y agoBut if you're using React you are creating a not-insignificant webapp and the initial install time of 177 modules is totally irrelevant beyond that first install. It doesn't have any reflection on the size of the client JS file (webpack loaders, for example, only live on the dev machine). Moreover, you can presumably globally install this, so it can cover every React-based project you need to build. What is an acceptable number of modules?
- rymate1234 10y agoSurely the important bit is the size of the code that's served to the end user, not the size of the development environment? My Visual Studio install is easily at least 4GB, yet this doesn't matter to the end user as the packages produced are about 6MB total
- tacone 10y agoThat's Node, baby. Deal with it.
- ola 10y agoIt's just an example to show what type of code `reactpack` builds, ES6 and JSX with style loading in this case. If you want a more minimal React-like build you can switch out React with lightweight alternatives like Preact or React-lite.
- tracker1 10y agoFor reference, I build a standalone datepicker module with preact + redux at under 20kb (min + gz)... worked out really well. By comparison, went with regular react recently, and the payload quickly got over 200kb, though I needed a couple relatively heavy libraries for the app in question. Another point worth mentioning is using react-icons individually (svg based), same for component libraries where you are only using a few components... tends to work out much lighter. Also, if you do use bootstrap as a base css library, work from the source instead of monkey patching the .css output.
- catpolice 10y agoMost of the modules involved are development side resources that don't end up included in the build. Complaining about the number of modules is like installing visual studio, noticing that it takes several gigs on disk and being like "Gigabytes, for a hello world program?"
- bahmutov 10y agoWe use "bates" https://github.com/luiscarli/bates https://github.com/luiscarli/bates by our own engineer
- greenspot 10y agoreact router missing
- tracker1 10y agolikewise redux, redux thunks and wireup for router would probably be beneficial as a starting point. Of course at that point, pretty much wandering into starter project territory.
- mst 10y agoPlus while redux is an excellent redux it's not everybody's cup of tea. (I currently like both redux and mobx depending)
- tomtau 10y agoI wish we had something like this officially backed by the react team. In 30 minutes when a new standard approach comes out, this tool will become obsolete.
- andreasklinger 10y ago+1 would love more "explicit (in code) best practices" if possible even a "recommended default approach" i understand that a full "framework" is not the way to for the community. but a few default standards would be good as guidance for newcomers and to manage expectations of coders coming into existing projects
- timdorr 10y agoTo be fair, this is just packaging up a fairly standard webpack config with a nice CLI: https://github.com/olahol/reactpack/blob/master/config.js https://github.com/olahol/reactpack/blob/master/config.js So, it can be extended or changed as the whims of the JS community migrate between tools and practices.
- nilliams 10y agoThey are specifically working on it according to this React.js Conf talk [0]. There's also rwb from Pete Hunt [1]. EDIT: Removed comment about 'standard'. Ain't so bad anymore apparently. [0] https://www.youtube.com/watch?v=-RJf2jYzs8A#t=00h14m25s https://www.youtube.com/watch?v=-RJf2jYzs8A#t=00h14m25s [1] https://github.com/petehunt/rwb/ https://github.com/petehunt/rwb/
- clessg 10y ago> the most obnoxious style-guide of all What do you mean? I've heard people say that a couple times but they never really elaborated. Do people love their semicolons that much? Are people offended that it's called "standard"? Or something else? > They are specifically working on it according to this React.js Conf talk This is very exciting. I prefer React over Vue, but one of the things I love about Vue is vue-cli[0]. Something similar, if not better, for React, would be greatly appreciated. [0] https://vuejs.org/2015/12/28/vue-cli/ https://vuejs.org/2015/12/28/vue-cli/
- zxcvcxz 10y agoWhen I try to install it npm just hangs command: npm i --save-dev reactpack node version: v0.12.6 npm version 2.11.2 uname -a Linux gentoo-1 4.4.0-22-generic #40-Ubuntu SMP Thu May 12 22:03:46 UTC 2016 x86_64 Intel(R) Core(TM) i5-2430M CPU @ 2.40GHz GenuineIntel GNU/Linux
- untog 10y agoThose versions of npm and node are quite old - I imagine the minimum requirements might be higher, though the project should have those outlined.
- insin 10y agoIt could just be spinning - Babel 6 presets install _lots_ of duplicated dependencies with npm2. I need to move a similar project from Babel 5 to Babel 6 soon and tried manually deduplicating Babel 6 preset dependencies for better npm2 support [1] - doing so reduced the size of node_modules/ from ~120MB to ~6MB! https://github.com/insin/deduped-babel-presets#babel-6-presets-for-nwb https://github.com/insin/deduped-babel-presets#babel-6-prese...
- kcaptcaer 10y agoI'm a bit confused - this didn't actually install a shell script that can be run ?
- matthewtoast 10y agoNice work! I've been looking for something like this. I hope to see more tools in this vein emerge from the JavaScript ecosystem - tools that aren't afraid to make some well-reasoned assumptions for the sake of a more minimal interface. (It seems like every tool nowadays wants you to put another dotfile or garbage.json at the root of your project.)
- smrtinsert 10y agoFinally, an opinionated build tool.
- deleted 10y ago[deleted]
- wavelattice 10y agoThese things are always funny to me. By the third or so release, it'll be just as easy to write your own script than to learn how to use this.
- Untit1ed 10y agoThat is an amazing logo.
- armandososa 10y agoI would love this only for the react stuff. More useful defaults, less opinions. For example: please let me chose my own CSS workflow and please don't force me to write javascript without semicolons like an animal :P. Update: I just realised that you can bypass the linter and the postcss. I am sorry OP, looks like I'm a lazy jackass.
- pitaj 10y agoS E M I C O L O N S E M I C O L O N S
- deleted 10y ago[deleted]
- RomanPushkin 10y agoI've similar plugin for gulp https://github.com/ro31337/gulp-react-easy https://github.com/ro31337/gulp-react-easy