jedwards1211 / meteor-webpack-react Goto Github PK

View Code? Open in Web Editor NEW

374.0 374.0 76.0 1.1 MB

(DEPRECATED) use jedwards1211/crater instead

Home Page: https://github.com/jedwards1211/crater

HTML 2.68% JavaScript 96.94% CSS 0.22% Shell 0.16%

meteor-webpack-react's People

Contributors

Stargazers

Watchers

Forkers

tribemedia profab carlosphillips thesunny grigio jcoreio markshust churcho adambrodzinski brucecoddington fokkerone gdub01 tungv alex-learn drooids jthomaschewski rclai timbrandin julio-saito-linx gaurav- ramsaylanier tomitrescak ztrauq gabrielhpugliese osxi haydnhkim okmttdhr frameworks-alexuser01 nicholasalanbrown kimsk outluch mastersanto simonhjsong reactjs-alex-alex2006hw djhi erobit duataud evansb praneybehl valentin-seehausen daxchen dlents singggum3b bgrsquared raiscui ahmadel-banna yanivnizry vraptor75011 jarredwitt paulwooddesign blackbeario zarazi lewtds-forks virgile-dauge jonathanbergers wdhorton chiefr digideskio detectiveosint lymanlai tobias-f murator jj81 helenitvn carapai bodhihu mokto ryunosukef ericchan1983 shijunti19 joetm waltdakind stephenmayeux jurevans ammarqqqq

meteor-webpack-react's Issues

Missing NPM dependencies

I just set up the simple-todos branch and after running npm install and ./dev as instructed, I discovered I still had a lot of missing dependencies to install. I don't know if this is expected, but it wasn't mentioned in the README. In any case, the errors went away after I installed the following:

ast-types connect-history-api-fallback css-selector-tokenizer cssnano express http-proxy lazy-cache loader-utils minimist normalize-selector optimist postcss postcss-modules-extract-imports postcss-modules-local-by-default postcss-modules-scope regenerate regjsgen regjsparser serve-index socket.io socket.io-client stream-cache strip-ansi supports-color uniqs webpack-dev-middleware wordwrap

Is this just me having something configured wrong, or should these be in package.json somewhere?

I also got ./dev: line 20: /home/oliver/meteor-webpack-react/node_modules/webpack/bin/webpack.js: Permission denied which may be a separate issue, but may be related?

Use meteor CLI from the same root directory, npm run meteor -- ...

Sometimes you may want to manage the meteor_app or meteor_core via meteor command.. but it isn't available outside it's directory.

So instead change directory and running

meteor <arguments>
meteor search babel

you can do from the usual directory:

❯ npm run meteor search babel ⏎ # or npm run meteor -- --version

> [email protected] meteor /Users/grigio/+persistant/Code/testing/meteor-webpack-react/webpack
> cd ../meteor && meteor "search" "babel"

Matching packages:                            
babel-compiler             Parser/transpiler for ECMAScript 2015+ syntax
babel-runtime              Runtime support for output of B

Problem using SASS with CSS Modules

I want to start off by saying that I think this is an awesome effort here. I'm new to using webpack and CSS Modules, and I think I'm missing something.

I'm attempting to slowly port over an existing app that was original built using the Meteor build with React, Flow Router, and React Layout. I've got the very basics working, and I see my login page gets rendered with the right form - but I can't figure out how to get the css to load. I'm using the sass-loader.

Here is a link to my repo. Any thoughts?

Server: auto reload broken since server source map support

Since 958be22 auto reload of server code is broken.

Steps to reproduce:

run ./dev on latest master or 958be22
See output of meteor methods "sayHello": "Hello from Meteor method!"
Change return value of "sayHello" - server bundle is getting updated (terminal shows server.bundle update - but no message from meteor server)
reload in brower, return value is still the old ("Hello from Meteor method!")

Somehow the Npm.required server bundle is not watched by meteor but maybe cached? I'm wondering why this doesn't work.

~~By the way: In latest master (not in 958be22) client reloads if something on the server is changed. I don't think that's intended?~~ (Not happening anymore, don't know why)

Thanks for adding source map support for the server! It's really the feature I missed the most while using this stack. Hopefully a solution can be found soon :)

hot reloading sometimes fails because server doesn't provide CORS header

I've seen this at least once, though I haven't thoroughly investigated why it doesn't always fail...

I think the eventual solution may be to:

use webpack-dev-middleware
add an index route that:
- requests the meteor page from localhost:3000
- injects the bundles into the HTML (I also want to make it inject a React commons bundle in the right place so that the fork of react-packages can use it)
- serves it up

That approach may interfere with automatic app caching via whatever that Meteor package for app caching is, I don't know. It would be so much better if you could get Meteor to put handwritten <script> tags in a specific order in the <head> though...

Script blows out entire client directory

Should the webpack stuff go under another directory if it's going to blow out everything? for example webpack/client/loadClientBundle.js and webpack/server/bundle.js?

I am in the middle of migrating a legacy Meteor app to webpack and just lost all of my styles and global namespaces that I put in meteor_core/client/..... I didn't realize it would be nuked and after I rebooted everything started throwing. I think I got most of it back with Git (kind of hairy staging area at the moment lol)

prod and build scripts question

First off, I really dig this project, thanks for doing it!I love meteor, webpack, and react. My biggest issue with meteor was the way everything is shared as a global. So I was excited to see this project!

I could use a little more direction about the prod and build scripts. So I have a project based on this skeleton. I've asked one of our sysadmins to install this on a server and have it rebuild whenever we merge to master. And I said this can be built simply with npm install && ./prod.

Then he noticed the ./build script and asked about that. And now I'm not exactly sure how this should be run in production. If the app is normally run with ./prod in production, then why do we need a separate ./build script? I'm misunderstanding one of these. Could I get a little hand-holding?

Also, is it possible to update the app in production without downtime? Anything special we need to know to do so?

Alternate folder structure

I've been tweaking and tuning the setup to work for my personal boilerplate so I thought I would share this in case you want to pull some ideas from it or even do a full PR. My alt-structure branch has the reformed app. Basically it merges the webpack and meteor folders together and separate the app into app and the meteor folder into meteor_files. IMHO this makes the whole setup feel more first class as opposed to feeling like two separate projects.

I've also done away with the client/both/server folders. I've been so ingrained with that setup that it seemed right at first... however it makes more sense to have a flat structure with two main files for client & server.

Here's a screen of the folder structure (entire and just app/):

It also has a bare bones layout for pages and components instead of the todo app.. since that will always have to be deleted. Most apps will have a header/footer/ and home page so these will likely stay most of the time.

Also:

es lint and lint target (npm run lint)
scss loader
require aliases for components, models, etc..
meteor settings and utils helper
react-router
blaze component fix

It also has some super basic CSS (reset, box padding/margin fix, header, page) so that people can look at how to require styles on a per component/page basis.

At the very least I think we should merge in the blaze template fix (now never updates) and meteor settings. The rest is opinionated and i'm obviously biased. This setup has worked well for other prod apps (albeit with globals and client/both/server folders lol) If you like this just let me know what parts to PR.

Cheers! 🍻

Should production mode should use meteor --production flag?

I was expecting npm run prod to also run Meteor in it's production mode. Is this something that should happen? Or is it beneficial for Meteor to be in dev mode but webpack not? I also wasn't sure if it was just for the React dev/prod or if it's a webpack thing (still learning that lol).

I can submit a PR if this is a wanted thing. It seems to work ok on my build.

CoreJS build fails during deploy

I've found a strange bug when using the deploy script with CI:

Start with clean repository (corejs not build ...)
Run npm install and node deploy.js meteor.com
CoreJS build fails:

Building [email protected] without ES6 number constructor...

> [email protected] build-core-js /home/janek/tmp/meteor-webpack-react-jbbr
> grunt --gruntfile node_modules/core-js/Gruntfile.js build:es5,es6,es7,js,web --blacklist=es6.number.constructor --path=core-js-no-number

Loading "Gruntfile.js" tasks...ERROR
>> Error: Cannot find module 'LiveScript'
Warning: Task "build:es5,es6,es7,js,web" not found. Use --force to continue.

Aborted due to warnings.

npm ERR! Linux 4.2.2-1-ARCH
npm ERR! argv "/usr/bin/node" "/usr/bin/npm" "run" "build-core-js"
npm ERR! node v4.1.1
npm ERR! npm  v3.3.5
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build-core-js: `grunt --gruntfile node_modules/core-js/Gruntfile.js build:es5,es6,es7,js,web --blacklist=es6.number.constructor --path=core-js-no-number`
npm ERR! Exit status 3
npm ERR! 
npm ERR! Failed at the [email protected] build-core-js script 'grunt --gruntfile node_modules/core-js/Gruntfile.js build:es5,es6,es7,js,web --blacklist=es6.number.constructor --path=core-js-no-number'.
npm ERR! This is most likely a problem with the meteor-webpack-react package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     grunt --gruntfile node_modules/core-js/Gruntfile.js build:es5,es6,es7,js,web --blacklist=es6.number.constructor --path=core-js-no-number
npm ERR! You can get their info via:
npm ERR!     npm owner ls meteor-webpack-react
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/janek/tmp/meteor-webpack-react-jbbr/npm-debug.log
mv: no such file or directory: core-js-no-number.js

ln: Source file does not exist

Hash: a941a9b3171a0f8f2a31  
Version: webpack 1.12.2
Time: 733ms

After using the dev.js script at least one time deploy.js runs fine.

I don't know why this happens as core-js build script is required the same way. Maybe it's due to different environment variables?

Webpack babel/polyfill breaks the Meteor Server runtime (check(..)) [workaround included]

I've a publication on the server and it works

Meteor.publish('items', function() {
  let cursor = Items.find({},{});
  return cursor;
});

but if I add a limit it doesn't work anymore, I get no data and some errors in the server console

Meteor.publish('items', function() {
  let cursor = Items.find({},{limit:5});
  return cursor;
});

I20150819-12:43:58.078(2)? Exception from sub items id YH5TRH2hZKobxdinu Error: Match error: Failed Match.OneOf or Match.Optional validation
I20150819-12:43:58.079(2)?     at checkSubtree (packages/check/match.js:244:1)
I20150819-12:43:58.080(2)?     at check (packages/check/match.js:32:1)
I20150819-12:43:58.080(2)?     at [object Object]._.extend._getFindOptions (packages/mongo/collection.js:239:1)
I20150819-12:43:58.080(2)?     at [object Object]._.extend.find (packages/mongo/collection.js:275:1)
I20150819-12:43:58.084(2)?     at [object Object]._handler (app/server/main.js:4204:39)
I20150819-12:43:58.084(2)?     at maybeAuditArgumentChecks (packages/ddp/livedata_server.js:1617:1)
I20150819-12:43:58.084(2)?     at [object Object]._.extend._runHandler (packages/ddp/livedata_server.js:950:1)
I20150819-12:43:58.084(2)?     at [object Object]._.extend._startSubscription (packages/ddp/livedata_server.js:769:1)
I20150819-12:43:58.085(2)?     at [object Object]._.extend.protocol_handlers.sub (packages/ddp/livedata_server.js:582:1)
I20150819-12:43:58.091(2)?     at packages/ddp/livedata_server.js:546:1
I20150819-12:43:58.091(2)? Sanitized and reported to the client as: Match failed [400]

ideas?

Example folder structure for large projects

Question: How do you guys structure your react components in large projects when using meteor-webpack-react?

Also, should we make a repo for examples with react-router and Flow Router setups? Inspired by these: https://github.com/rackt/react-router/tree/master/examples

Used "huge-apps" example from above (also with useraccounts) and it worked good, but wanted to see how would similar structure look refractored for FlowRouter.

disable minification on Meteor side to speed up prod builds

I have done this in my own project, where I use my own package instead of standard-minifiers to prevent *.bundle.js from getting minified; this way only the webpack UglifyJS plugin performs minification, which I think is faster because it operates per module, instead of on the entire bundle at once.

In my experience, minification can become super slow in large projects.

require is not defined

Hi, I'm trying to upgrade my project to the latest version from master, but all my project end up with the same error:

W20151005-18:35:26.190(11)? (STDERR) /Users/tomi/.meteor/packages/meteor-tool/.1.1.9.15i59m2++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/server-lib/node_modules/underscore/underscore.js:79
W20151005-18:35:26.190(11)? (STDERR)       obj.forEach(iterator, context);
W20151005-18:35:26.190(11)? (STDERR)           ^
W20151005-18:35:26.190(11)? (STDERR) ReferenceError: require is not defined

Any idea what can be causing this?

Thanks!

Great Package - Can you make an example of

"or if you want to use Sass, you can require the Sass files"?

Specifically, I am using Stylus and also CJSX (coffeescript). I'd like to do the what you say is possible, I Just need an example please

Loading assets (like images) by url with webpack

I'm trying to load some images via webpack by using url-loader like that:

{ test: /\.png$/, loader: 'url-loader?limit=10000&mimetype=image/png' }

In dev mode imported images get converted to a url like http://0.0.0.0:9090/assets/7de2d4d25d8c70839ae06de9c36ed886.png which seems to be correct. But the webpack-dev server returns an empty response.
No files are generated anywhere in ./webpack/assets or ./meteor_core

In prod mode imported images are generated and saved to e.g ./webpack/assets/7de2d4d25d8c70839ae06de9c36ed886.png

But urls point to meteor server like http://127.0.0.1:3000/assets/7de2d4d25d8c70839ae06de9c36ed886.png and obviously the generated files are not accessible.

Of course it's possible to access images which are stored in ./meteor_core/public/ - but I'd like to use webpack loaders to have goodies like automatically generated base64 strings for small images, minification...

Is there any recommended way of loading assets by url with this skeleton?

Side effects?

Nice, are there side effects with this approch with meteor, react, browserify on client or server side?
Is possible to load both servers with a single command?

Variable Redeclaration

Hey I just wanted to say that this is an awesome repo and I really appreciate what you guys have done here. However, I did have a couple of questions about the webpack code you guys have setup.

// webpack.config.client.dev.js
var webpack = require('webpack');
var config = require('./webpack.config.client');
var _ = require('lodash');

var devProps = require('./devProps');

var config = module.exports = _.assign(_.cloneDeep(config), {
...

// webpack.config.client.prod.js
var webpack = require('webpack');
var config = require('./webpack.config.client');
var _ = require('lodash');

var config = module.exports = _.assign(_.cloneDeep(config), {
...

// webpack.config.server.prod.js
var webpack = require('webpack');
var config = require('./webpack.config.server');
var _ = require('lodash');

var config = module.exports = _.assign(_.cloneDeep(config), {
...

You guys seem to have defined config twice? Is this intentional? I think that it might make sense to either just drop the var and just redefine it or use a different variable name on one place.

Also I am using no-ip to setup a quick public url I can access my app from and I am also running into another problem there. When I run the ./dev script I get all the awesome benefits of hot reloading and webpack but it only works on localhost.

if I want to check how the site looks on another device (ie: my phone) I generally use my public ip address. I then need to use the ./prod build as that seems to be the only version that works with non localhost addresses. I tried changing any instance I saw of localhost:3000 to 0.0.0.0:3000 but that didn't seem to do the trick. Can you guys point me in the right direction as to what I need to change to get everything set up?

Meteor specific issues

I think it would be a good idea to keep track of known issues with Meteor compatibility for new users that come across this. I'll try to knock these off as I have time. Feel free to close if this is unwanted.

Velocity tests must be placed (or symlinked) into meteor_core for them to run
Can't hot-load Meteor methods or Mongo collections (force refresh required if that file changes)
Must expose global for the meteor shell (can't require in REPL)
No source maps on server debugger

babelHelpers is not defined

I created a fresh install on dev mode. When I loaded the page, I got this on my console:

[HMR] Waiting for update signal from WDS...
meteor-data-mixin.jsx.js?fa4d1f3defe065ca62fd3e0ac3211e558fd74325:40
Uncaught ReferenceError: babelHelpers is not definedMeteorDataManager
@ meteor-data-mixin.jsx.js?fa4d1f3defe065ca62fd3e0ac3211e558fd74325:40ReactMeteorData.componentWillMount
@ meteor-data-mixin.jsx.js?fa4d1f3defe065ca62fd3e0ac3211e558fd74325:4(anonymous function)
@ makeAssimilatePrototype.js:15ReactCompositeComponentMixin.mountComponent
@ ReactCompositeComponent.js:228ReactPerf.measure.wrapper
@ ReactPerf.js:70ReactReconciler.mountComponent
@ ReactReconciler.js:38mountComponentIntoNode
@ ReactMount.js:248Mixin.perform
@ Transaction.js:134batchedMountComponentIntoNode
@ ReactMount.js:269Mixin.perform @ Transaction.js:134ReactDefaultBatchingStrategy.batchedUpdates
@ ReactDefaultBatchingStrategy.js:66batchedUpdates
@ ReactUpdates.js:110ReactMount._renderNewRootComponent
@ ReactMount.js:404ReactPerf.measure.wrapper
@ ReactPerf.js:70ReactMount.render
@ ReactMount.js:493ReactPerf.measure.wrapper
@ ReactPerf.js:70window.onload
@ index.js:14
[WDS] Hot Module Replacement enabled.

use `resolve.root` instead of `resolve.alias` for project folders

(@grigio @AdamBrodzinski you guys will probably find this useful)
I can't believe it, but I only now discovered Webpack's resolve.root config option. By setting it to the parent directory of app, the aliases we made like to app and other folders are unnecessary, and moreover they're a bit dangerous: when I aliased a util folder in my own project, some Node.js SHA-1 code that tries to require a util/... somewhere failed to resolve it. Using resolve.root instead fixed everything.

I think alias was really only intended to override module locations, rather than how we're using it in this project right now

Figure out of it's possible to get source maps for the server bundle into Node

Perhaps using something like https://github.com/evanw/node-source-map-support

over 100% CPU

This is what happened when i start your neat lil app on a MBP Retina

./prod production.. Minified exception

./build
./met deploy mysite

I get in the browser console

Uncaught Error: Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.

Is there any chance to switch MDG to webpack?

Error building project

When executing "./prod" it fails during uglification on all ".jsx" file

For example:
ERROR in client.bundle.js from UglifyJs
Unexpected character '`' [../app/lib/i18n/i18n.en.jsx:465,0]

There I used template strings.

Speed up hot-loading

The 2 sec hot-load isn't bad but could be better.

I've done some hacking on my new webpack project and reduced the re-load time down to around 0.8 seconds.... ish. It's getting hard to time it with a stopwatch lol. As I finish the rest of the migration it'll be nice to see what a med sized app will do (currently it's only watching around ~70 files).

I have another 500+ file app around 20k loc that takes 15+ seconds to reload with Meteor... would love to see what this would do lol.

Hoping to be able to PR tonight or tomorrow 👍

node-inspector not running

When I run the app using ./debug I get the message:

Node Inspector v0.12.3
Visit http://127.0.0.1:8080/?ws=127.0.0.1:8080&port=5858 to start debugging.

But that never actually works. I have node-inspector installed globally. For some reason it doesn't work for me with just meteor debug in any meteor project, but I am able to get it running in other meteor projects via meteor --debug-port 5000.

So I tried modifying this line to read:

meteor --debug-port 5000 --settings ../settings/devel.json &

And then node-inspector does start working for me. I don't know if others are running into problems with ./debug or if this is specific to my system, but figured I'd report it and my local fix.

dev line 20 meteor command not found oO ( Windows 10 )

Hi i try to get this thing working but when i use

sh dev i got

{lamb} sh dev
removing all entries of directory `assets'
removing `assets/server.bundle.js'
removing the directory itself: `assets'
 70% 1/1 build moduleshttp://localhost:9090/webpack-dev-server/
webpack result is served from http://0.0.0.0:9090/assets/
content is served from http://0.0.0.0:3000
404s will fallback to /index.html
Hash: c96b29ef80173d675486
Version: webpack 1.11.0
Time: 1446ms
           Asset    Size  Chunks             Chunk Names
server.bundle.js  148 kB       0  [emitted]  main
   [0] multi main 40 bytes {0} [built]
    + 172 hidden modules
26% 11/41 build modulesdev: line 20: meteor: command not found
Hash: 5c6fd928f9bb28c272a3
Version: webpack 1.11.0
Time: 3420ms
and more ...

i got this 26% 11/41 build modulesdev: line 20: meteor: command not found but im 100% sure i have meteor installed right i can use meteor command everywhere

Here is a screen when i open http://localhost:9090/webpack-dev-server/

https://sc-cdn.scaleengine.net/i/6a47a558a038ca18c102c027bba005bc2.png

Source maps broken since "redbox-react"

Since commit ecc7518 source maps seems to be broken

The nice big red error stacktrace is shown but every class name gets "ProxyClass", line numbers are wrong and the Chrome inspector does only show the bundled file names.

With the previous commit 9e6a666 the big red error stacktrace is gone but Chrome shows correct filenames and line numbers (I intentionally broke App.jsx on line 27)

After executing ./prod and './met deploy', 'react-transform-hmr' problem occurs.

In console, warning as

"Uncaught Error: locals[0] does not appear to be a module object with Hot Module replacement API enabled. You should disable react-transform-hmr in production by using env section in Babel configuration. See the example in README: https://github.com/gaearon/react-transform-hmr".

How can I fix this issue ?

react-transform-webpack-hmr has been renamed to react-transform-hmr

Did they change again?

Getting this error on the console, but it still works.

Peer dependencies missing with npm 3+

When using latest node 4.1.0 with npm 3.3 this package does not work anymore as it depends on peerDependencies of babel-core and others.

Most problematic: core-js is not available anymore in node_modules/babel-core/node_modules/core-js

I assume core-js has to be added as top level dependency and the core-js-custom-build has to be adjusted.

Broken build

Doh.... I was recording a video tutorial on how to use webpack and ran into a blocker 😦
If I checkout master and run npm install then ./dev it fails at the end

ERROR in multi main
Module not found: Error: Cannot resolve 'file' or 'directory' ../lib/core-js-no-number in /Users/adam/Desktop/meteor-webpack-react/webpack
 @ multi main
webpack: bundle is now VALID.
=> Started MongoDB.
=> Exited with code: 8
W20150830-19:06:23.992(-4)? (STDERR)
W20150830-19:06:23.994(-4)? (STDERR) /Users/adam/.meteor/packages/meteor-tool/.1.1.4.1uwzp7a++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/server-lib/node_modules/fibers/future.js:245
W20150830-19:06:23.994(-4)? (STDERR)                        throw(ex);
W20150830-19:06:23.994(-4)? (STDERR)                              ^
W20150830-19:06:23.994(-4)? (STDERR) Error: Cannot find module "../lib/core-js-no-number"
W20150830-19:06:23.994(-4)? (STDERR)     at webpackMissingModule (app/server/server.bundle.js:47:43)

The lib folder is created but empty. I also tried to manually run the core-js-custom-build script but that also fails with:

meteor-webpack-react|master ⇒ ./core-js-custom-build
Building [email protected] without ES6 number constructor...

> [email protected] install /Users/adam/Desktop/meteor-webpack-react/node_modules/babel-core/node_modules/core-js/node_modules/phantomjs
> node install.js

Looks like an `npm install -g`; unable to check for already installed version.
Download already available at /var/folders/78/h1vhkwqj0jdc47lnb_ymqx8c0000gn/T/phantomjs/phantomjs-1.9.8-macosx.zip
Extracting zip contents
Removing /Users/adam/Desktop/meteor-webpack-react/node_modules/babel-core/node_modules/core-js/node_modules/phantomjs/lib/phantom
Copying extracted folder /var/folders/78/h1vhkwqj0jdc47lnb_ymqx8c0000gn/T/phantomjs/phantomjs-1.9.8-macosx.zip-extract-1440976465329/phantomjs-1.9.8-macosx -> /Users/adam/Desktop/meteor-webpack-react/node_modules/babel-core/node_modules/core-js/node_modules/phantomjs/lib/phantom
Writing location.js file
Done. Phantomjs binary available at /Users/adam/Desktop/meteor-webpack-react/node_modules/babel-core/node_modules/core-js/node_modules/phantomjs/lib/phantom/bin/phantomjs
./core-js-custom-build: line 12: grunt: command not found

Is there any way to just build it and commit the file to the repo? I like the idea of having the latest but if it's going to be brittle I think having a default polyfill file would be best and they can always do a custom build if they need the bleeding edge.

How do you use meteor packages ?

Hi everyone,
sorry if this was already asked, or if this is so easy that i did not see it, but how do you use meteor packages with this ?
Is there a way to require them in your code ?

make more generic eslint config with no stylistic defaults

@AdamBrodzinski I didn't notice until today that you snuck in the airbnb eslint config :) Since it's extremely strict about whitespace, dangling commas, and other stylistic things, I'd rather replace it with a more generic eslint config at some point, basically just eslint:recommended with maybe a few tweaks.

Webpage is not available

After npm install and ./dev there's redirect to http://0.0.0.0:3000/index.html and no page available. Last message from terminal: "webpack: bundle is now VALID". What is wrong?

core-js-custom-build script doesn't seem to be extracting version number properly on some machines

I'll just make a little node script to read the package.json and output the version number

Copy Server Files Over

I'm creating a new issue to break it off of #1

mmm. I started testing out building the server code with Webpack, as well as having a both folder where things like collection declarations go.

However, having new Meteor.Collection(...) in a Webpack bundle doesn't work with hot reloading, because when it runs the new module, creating the collection again with the same name errors out. This isn't a problem with Meteor of course because it refreshes the entire page.

If there's any way you could share your config today for the entry point that would be great! At any rate i'm going to grind away at this today to get it to work!

If there isn't a way to have hot-loader ignore a 'collections' folder, we could define the collections in the meteor folder. This is not ideal but is better than nothing.

Another idea is to define them in a folder that webpack ignores and then manually cp them over on startup since they don't change much.

So this kind of seems like a snag. Also as far as debugging server code goes, I don't know if there's any way for Node to process the source map generated by Webpack. Maybe we should check out joe's new ES6 module plugin for the server side?

Not sure about this one. I've only used the --debug flag to invoke Node debugger in the chrome console with es5. @trusktr any ideas on this?

webpack can't find jquery

Working with http://wysiwygjs.github.io/ via npm https://www.npmjs.com/package/wysiwyg.js

I'm requiring it into a react component like:

require('wysiwyg.js/src/wysiwyg-editor.js');

The file I want requires jQuery to do its thing but it can't find jQuery

./~/wysiwyg.js/src/wysiwyg-editor.js
Module not found: Error: Cannot resolve module 'jquery' in /websites/webpack-blog/node_modules/wysiwyg.js/src
resolve module jquery in /websites/webpack-blog/node_modules/wysiwyg.js/src

I think it's because meteor, not webpack imports it?

Run scripts using npm?

I noticed that these scripts don't exist.

Would it be cleaner to put those scripts in the root folder into a scripts folder and use npm to run them so that you can do npm dev instead of ./dev?

How to build a product version and deploy it with MUP?

Hi, kudos on having transformation to Meteor 1.2 with 0% problems ;)
I guess this solution will not be using the jsx and ecmascript capabilities of Meteor, but using the webpack ones, right?

Also, how do I deploy my meteor app?
There are prod / dev and build commands, but I'm not sure how they relate to deployment. Do I need to run build prior to packaging my application with MUP from the meteor_core directory?

Thanks!

Use global underscore instead of lo-dash

If lo-dash was moved to dev-dependencies, would that omit it when the package is being built? If so that would be ideal since we're already getting underscore for free since Meteor core currently depends on it. I think a good default would be to alias underscore to the global one that Meteor provides and the user can always add lodash, Ramda, etc... if needed.

Is this what the webpack externals key is for?

Here's a link to package.json for ref.
https://github.com/jedwards1211/meteor-webpack-react/blob/master/package.json#L24

If this is something that's wanted I can PR tomorrow sometime.

I don't get it

Why use webpack?

Environment variables

Hi, I've found out that using this solution no environemnt variables are set (e.g. process.env.PWD), so I tries to set them manually. For some reason the process.env stays empty ;/

I've found out, that you can somehow set variables in ../settings/devel.json but these are not contained in processs.env. Where are these properties set?

Thanks!

I get WARNING messages when I execute "npm install" with node v4.1.1 and npm v2.14.4

I'm using node v4.1.1 and npm v2.14.4.
When I execute "npm install", I get those warning messages.

npm WARN deprecated [email protected]: Deprecated.
npm WARN optional dep failed, continuing [email protected]
npm WARN optional dep failed, continuing [email protected]

What should I do, if I want to remove the warning messages ?
I'm a meteor guy, but not know well about node.js. Please help me.

Module app alias or some aliases?

Currently some common files are required with relative notation, my proposal is to use the app/* alias or some aliases for some common imports (e.g collections), however this change won't forbid you to continue to require the files with relative path.

// main_server_js
import {Posts} from './collections';
...
// main_server_js
import {Users, Posts} from '../collections';

after

// main_server_js
import {Posts} from 'app/collections';
...
// main_server_js
import {Users, Posts} from 'app/collections';

Documentation for how to migrate an existing project

I've ended up here from working on a rather large Meteor project and looking for a better way to decompose it into packages, preferably NPM packages. I tried cosmos-browserify which is fantastic for simple use cases, but becomes problematic with bigger requirements like importing large or previously Browserified components.

In comparison to that and standard Meteor, this library/framework/"project skeleton", whatever it is, seems like magic, even if I'm not using React. The simple-todos branch is a good example of a simple app, but it's not immediately obvious how I would take that and port my modules into this build system. Clearly the code goes into /app, but even that folder is never mentioned in the README. It raises a number of questions, like whether main_client and main_server are special names, whether CoffeeScript is supported out of the box, whether files are loaded even if nothing explicitly imports them (a la Meteor), etc.

For comparison, the rocket:module docs are quite instructive for how I go about starting an empty project, adding dependencies and so on. To be fair, it's easier because there are more familiar tools.

I'm just bringing it up as a slightly confused visitor. Even just adding a paragraph saying "Make a copy of the entire directory structure, delete the contents of /app and put your own stuff in there" would help, if that is indeed correct.

Do not deploy/run on error (bail: true?)

I'm using a CI to auto deploy my app after a git push.
To get a "fail" for broken builds in CI I need a non zero exit code from the scripts if something went wrong. The default behavior of webpack on error is currently to just continue and don't throw an error.
This is confusing and will change in webpack-2. See webpack/webpack#708 for details.

To archive the desired behavior I added the bail: true to my webpack config files and webpack now fails hard with exit code if something went wrong (like a non existent import).
With the new shelljs scripts, error output is missing because the error from the callback is not printed - Maybe something like console.error(err.message) would be a good idea instead of returning silently? Unfortunately console.log of err does not look as nice as stats from webpack - which seems to be undefined when using bail option and running into an error.

I think that bail: true is the desired behavior of a build script and I would suggest enabling it in this skeleton by default and add error output and non-zero exit code to deploy and maybe also run scripts (which should only exit on error on first run obviously)

install fibers error when run test-built script

Clone this wonderful project, then do a build and when I run test-built, there are some errors:

> [email protected] install /Users/minghaizhao/projects/meteor-webpack- react/dist/bundle/programs/server/node_modules/fibers
> node ./build.js

(node) child_process: options.customFds option is deprecated. Use options.stdio instead.
  CXX(target) Release/obj.target/fibers/src/fibers.o
../src/fibers.cc:132:44: error: too many arguments to function call, expected at most 2, have 4
                return Signature::New(isolate, receiver, argc, argv);
                       ~~~~~~~~~~~~~~                    ^~~~~~~~~~
/Users/minghaizhao/.node-gyp/4.1.1/include/node/v8.h:4675:3: note: 'New' declared here
  static Local<Signature> New(
  ^
../src/fibers.cc:140:3: error: no member named 'SetResourceConstraints' in namespace 'v8'; did you mean simply
      'SetResourceConstraints'?
                v8::SetResourceConstraints(isolate, constraints);
                ^~~~~~~~~~~~~~~~~~~~~~~~~~
                SetResourceConstraints
../src/fibers.cc:139:7: note: 'SetResourceConstraints' declared here
        void SetResourceConstraints(Isolate* isolate, ResourceConstraints* constraints) {
             ^
2 errors generated.

jedwards1211 / meteor-webpack-react Goto Github PK

meteor-webpack-react's People

Contributors

Stargazers

Watchers

Forkers

meteor-webpack-react's Issues

Recommend Projects

Recommend Topics

Recommend Org