Where does webpack fit in?

[tonyxiao]

Lots of discussion on meteor forum around webpack. Does webpack fit anywhere within Mantra?

https://forums.meteor.com/t/why-is-the-meteor-install-1-3-api-better-than-webpack-in-meteor/14480/51

[arunoda]

Sorry. This is for Meteor 1.3. Not for Webpack.

[tomitrescak]

Tony, I have ported Mantra to use with @exon meteor webpack solution. Check out this repo, https://github.com/tomitrescak/Meteor-Boilerplate-Webpack-Mantra-Typescript

You can find the original version of mantra, modules version of mantra, as well as mantra rewritten in typescript.

Hope it helps

[tonyxiao]

@arunoda I understand this is for Meteor 1.3. My question was do you see a future where webpack would fit into the mantra stack somewhere?

@tomitrescak thanks, I'll check it out!

[arunoda]

@tonyxiao probably. There is nothing prevent implement it with anything else :) For now, we do it Meteor. We can decide as we go.

[tonyxiao]

Sounds like in your mind webpack would be a replacement for meteor? I guess I don't sufficiently understand webpack yet, but I thought if meteor were to use it it would replace perhaps part or all of the build system, but there would still be plenty of actual meteor framework code that would continue to co-exist with webpack.

[arunoda]

@tonyxiao Meteor is more than a build system and it has the data layer and everything. So, that's why we stay with Meteor rather webpack. Our plan is to do this correctly with Meteor and think after that.

So, there is no solid plan for Webpack or others.

[natecox]

@tonyxiao There's lots of talk on the web about updating Meteor to use webpack as the build system eventually, but even if it happened it would very likely be a behind the scenes situation, and Mantra wouldn't really need to do much to support it hopefully.

[swennemans]

Just leaving a comment because personally I think the Meteor build system is really unproductive. The reloads on code changes are unfortunately way too long. In some situations I can literally get up from my desk and get a glass of water, and see the refresh happening when I'm back.

I'm not here to just complain about it of course, but just letting everyone know that it's fairly easy to use Mantra with Webpack, no magic is needed.

[arunoda]

@swennemans I agree. As we depend very little on Meteor. We may try to use webpack.

I'm re-opening this issue to re-visit on how to use Mantra with meteor-webpack. (Until Meteor comes with a better build tool)

[tomitrescak]

@swennemans have you managed to make it work with the boilerplate?

[arunoda]

Waiting for meteor-webpack to support Meteor 1.3 - https://github.com/thereactivestack/meteor-webpack/issues/55

[tomitrescak]

Yea, it's supposed to launch on 1/3. Hope so ;)

[luisherranz]

After working with Webpack, I have to say it's much nicer than the Meteor build system. HMR for developing and code splitting for serious production are really great features. I got HMR working flawlessly even with Cordova.

[tomitrescak]

The major drawback of using meteor-webpack is that for larger applications it gets terribly slow for server side and client side sometimes does not refresh well so the whole server restart is needed. For my app, the meteor-webpack takes 1,5 - 3! minutes to start on modern macbook pro with 16gb of memory and SSD drive and server refreshes take almost a minute as well .... therefore I am impatiently waiting for a new version which hopefully resolves these terrible loading times.

For everything else it's very nice!

[luisherranz]

I have to say, I am not using meteor-webpack, I just use webpack and then one of the npm ddp clients like https://github.com/mondora/ddp.js or https://github.com/hharnisc/node-ddp-client.

[tomitrescak]

Do you have a repo we can look at? So, you are runnin meteor only on server part and you pack client with Webpack? I'm not sure if I'm following.

[luisherranz]

That's the idea. I'll try to share an example as soon as I have the whole system working :+1:

[eXon]

I'm working on meteor-webpack and making sure it is working with 1.3. It will be MUCH faster for bigger project because npm install will be handled outside of Meteor. Then I'll be looking into helping people use it with mantra because I've been asked by many people. I'll keep this issue up to date once I release it march 1st :)

[arunoda]

@eXon awesome :+1:

[swennemans]

Awesome indeed :)

[ShockiTV]

Looking forward for webpack to enable standard CSS modules for true modular approach :D

[tonyxiao]

Can't wait! And @swennemans how are you using mantra with webpack at the moment?

[eXon]

mteor-webpack 1.0 is released and let me tell you why Mantra would be better to use it than not

1. No need to have Meteor 1.3. It works fine with 1.2 and 1.3!
2. Hot reload and code splitting not in 6 months but NOW
3. You can import CSS, LESS, SASS or anything under the sun.
4. Meteor 1,3 had to stick to their own build system because of retro-compatibility. But it is clearer and clearer that Webpack will eventually take over in the core. Maybe I'm wrong but I see little value to recode something that is already working really good.
5. Complicated webpack.config.js files are no longer required with meteor-webpack. You just add packages to opt-in features and can tweak the settings with a JSON file. Anyone can write those kind of packages.

@arunoda @tomitrescak Let me know what you think about this!

I would love to help Mantra figure out this :)

[natecox]

I believe the package being referred to above is this one: https://atmospherejs.com/webpack/webpack

If it works, that's awesome, though I'm curious about how it knows how to package the app. Without configuration regarding the asset dependency map wouldn't it be basically producing the same thing as Meteor is already doing? One big file at the front of the app load?

[eXon]

@natecox At the end of the day you get assets and js files. However, it gives you a bunch of tools you don't have only with Meteor (like hot-reload, importing assets like CSS or img, code splitting, ...)

[arunoda]

@eXon This looks great. I'd like to play with this and see how we can go with this. I'm all positive. And I welcome others to play around this and let us know how we can proceed.

[tomitrescak]

@arunoda I have quite large project working with it already, it's very nice ;) Basically now you can just drag and drop Mantra app to @exon 's solution and you are good to go (apart from installing npm dependencies). Just finished porting it to meteor-webpack 1.0. I also have a boilerplate for Mantra-Webpack projects.

[arunoda]

@tomitrescak Let me know once you are done with it, we'll get it on to the mantrajs org.

[tomitrescak]

@arunoda I have created a new repo in mantrajs organisation and it is accessible here https://github.com/mantrajs/kickstart-mantrajs-webpack.git

@exon if you are interested, you can use it as it is. I will add also a typescript version, once webpack:typescript is released ;) Cheers!

[arunoda]

@tomitrescak Great. I watched that. Why do we need to put the app under apps directory?

[tomitrescak]

It's just the way @exon structured the app, as it is prepared for code splitting and you can separate your the app fragments in this way. You can set your app root in webpack.json, but I have not experimented with setting it out of app directory.

[zimt28]

Great, but I'd prefer the normal kickstart structure for the webpack version as well, if it doesn't lead to big disadvantages. If someone wants to use code splitting, they could still change it.

[eXon]

I like to split config files and my apps source code. The folder name could have been named src instead of apps. You could very much move all the content in the root folder if you feel like this is redundant.

[guilhermedecampo]

@eXon @tomitrescak tested the hot-reload /reload by changing title of Mantra's Page but nothing happens.

Maybe some misconfig? I did the steps on README.

Awesome effort guys this will be huge! <3

[eXon]

@tomitrescak Just added your kickstart project to the official list of kickstarters :+1: Thank you so much for helping!

@guilhermedecampo Are you using the kickstart-mantrajs-webpack project?

[guilhermedecampo]

yes @eXon.

[guilhermedecampo]

Here is a video to demonstrate that http://sendvid.com/y1yf9bbr (previously the video I ran npm install ;))

[tomitrescak]

@guilhermedecampo you will hate to hear this, but HMR is currently not supported on stateless React components. The only component it will work on is the standard one defined as "React.Component". Maybe I should make it a part of the documentation. Sorry for wasting your time!

[EDIT] I have updated the documentation

[tomitrescak]

Try to modify the createpost.jsx component and you'll see that all works as expected.

[guilhermedecampo]

Thanks for answering and do the gif @tomitrescak!

A little bit sad but no worries :disappointed:

[tomitrescak]

Don't be too sad, it's coming ;) https://github.com/gaearon/babel-plugin-react-transform/pull/85

[eXon]

@tomitrescak I've renamed the apps folder to src in all my kickstart project. This literally took 15 secs to do (folder, package.json, webpack.json) but I feel like it describes better the purpose of the folder :)

[arunoda]

And I think we can put everything under src. No need to have a directory called Mantra inside it.

[tomitrescak]

Done! Yup, was quite simple. Let me know if you want to change anything.

[kokjinsam]

I keep getting error FlowRouter is undefined in meteor.startup.js if I use flow-router-ssr.

[eXon]

@sammkj Have you changed your import to:

import { FlowRouter } from 'meteor/kadira:flow-router-ssr';

[kokjinsam]

@exon Yeap. I was transferring a working SSR project to webpack. I tried using flow-router and it worked fine. But when i switch it back to flow-router-ssr, i got the same error again.

[kokjinsam]

@eXon, I tested flow-router-ssr with kickstart-mantra-webpack and got the same error.

TypeError: Object [object Object] has no method 'wait'
W20160304-12:04:52.875(-6)? (STDERR)     at src/meteor.startup.js:4:1
W20160304-12:04:52.875(-6)? (STDERR)     at src/meteor.startup.js:4:1

[eXon]

Have you tried moving the file in a client folder or adding if (Meteor.isClient)?

[kokjinsam]

Adding if (Meteor.isClient) solved the problem. Thanks @eXon !