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 👍

[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 👍

[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 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 👍 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 😞

[tomitrescak]

Don't be too sad, it's coming ;) gaearon/babel-plugin-react-transform#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 !

[tonyxiao]

@tomitrescak Regarding HMR can we use the strategy outlined in this pull request? reduxjs/redux#1455 It might actually be a better way to go anyways compare to transforming individual react components

[tomitrescak]

Looks good! But I guess this is on @eXon since he is the brain behind the webpack plugin. Having HMR for functional components would be a big help for Mantra devs.

[tonyxiao]

On that note @eXon how do you force an entire page refresh when HMR fails? Right now it just fails silently and requires a manual refresh which can be even less convenient compare to Meteor's full page refresh.

In other words, how do we get the behavior of webpack/hot/dev-server rather than webpack/hot/only-dev-server? (See https://webpack.github.io/docs/hot-module-replacement-with-webpack.html)

[tonyxiao]

@tomitrescak Yes indeed. Assuming most (if not all) components do not have local state, simply re-rendering the whole page with state stored in redux is really quite elegant way to solve this HMR problem on a general basis.

[swennemans]

@tonyxiao For more details about how I'm using redux + mantra, see: #103
It's not perfect yet, but it's working.

[tonyxiao]

@swennemans sorry I meant could you show an example of how you use webpack with mantra, not redux with mantra.

[sandervanhooft]

Would love to use webpack with Mantra so I can include module-specific images in the Mantra module instead of the /public folder!

[genyded]

With Meteor 1.3 and Mantra in the mix - the Meteor 'reloads' seems to take longer than ever. Also the Meteor Webpack stuff is currently broken even with Meteor 1.2 and with or without Mantra. It was awesome when it was working though.

[MechJosh0]

@genyded This may or may not help you depending where or what you need. I am not using Webpack and my project was taking between 60-65 seconds per load, I am now looking at 6-7 seconds per load.

tl;dr I switched to Ubuntu

I tested out Webpack, this did increase the client reload time to instant. I can't recall the reasons but I didn't like using Webpack, the biggest one is that it's only client reload time. So I needed to find a way to increase the server reload time too.

First I switched to a SSD which increased the load time to 45 seconds. I then removed Babel and Storybook from the devDependencies, this increased the load time to 20 seconds. My colleague who had a better PC spec was loading at 16 seconds so we then increased/matched my PC specs to his which decreased my speed to 21 seconds - yes we were and still are very confused about this.

I then tested in Ubunutu which was 6-7 seconds, this is due to the file reading speed. I added Babel and Storybook back into the devDependencies which (felt like or) had no affect on the load time.

I'm unsure on my projects load time for Mac, although my Mac colleague will be joining the project next week so I'm hoping the load time isn't an issue.