Comments (59)
Try to modify the createpost.jsx component and you'll see that all works as expected.
from mantra.
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 :)
from mantra.
Sorry. This is for Meteor 1.3. Not for Webpack.
from mantra.
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
from mantra.
@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!
from mantra.
@tonyxiao probably. There is nothing prevent implement it with anything else :)
For now, we do it Meteor. We can decide as we go.
from mantra.
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.
from mantra.
@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.
from mantra.
@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.
from mantra.
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.
from mantra.
@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)
from mantra.
@swennemans have you managed to make it work with the boilerplate?
from mantra.
Waiting for meteor-webpack to support Meteor 1.3 - https://github.com/thereactivestack/meteor-webpack/issues/55
from mantra.
Yea, it's supposed to launch on 1/3. Hope so ;)
from mantra.
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.
from mantra.
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!
from mantra.
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.
from mantra.
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.
from mantra.
That's the idea. I'll try to share an example as soon as I have the whole system working
from mantra.
@eXon awesome
from mantra.
Awesome indeed :)
from mantra.
Looking forward for webpack to enable standard CSS modules for true modular approach :D
from mantra.
Can't wait! And @swennemans how are you using mantra with webpack at the moment?
from mantra.
mteor-webpack 1.0 is released and let me tell you why Mantra would be better to use it than not
- No need to have Meteor 1.3. It works fine with 1.2 and 1.3!
- Hot reload and code splitting not in 6 months but NOW
- You can import CSS, LESS, SASS or anything under the sun.
- 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.
- 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 :)
from mantra.
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?
from mantra.
@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, ...)
from mantra.
@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.
from mantra.
@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.
from mantra.
@tomitrescak Let me know once you are done with it, we'll get it on to the mantrajs org.
from mantra.
@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!
from mantra.
@tomitrescak Great. I watched that. Why do we need to put the app under apps
directory?
from mantra.
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.
from mantra.
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.
from mantra.
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.
from mantra.
@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
from mantra.
@tomitrescak Just added your kickstart project to the official list of kickstarters
@guilhermedecampo Are you using the kickstart-mantrajs-webpack project?
from mantra.
yes @eXon.
from mantra.
Here is a video to demonstrate that http://sendvid.com/y1yf9bbr (previously the video I ran npm install
;))
from mantra.
@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
from mantra.
Thanks for answering and do the gif @tomitrescak!
A little bit sad but no worries
from mantra.
Don't be too sad, it's coming ;) gaearon/babel-plugin-react-transform#85
from mantra.
@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 :)
from mantra.
And I think we can put everything under src
. No need to have a directory called Mantra
inside it.
from mantra.
Done! Yup, was quite simple. Let me know if you want to change anything.
from mantra.
I keep getting error FlowRouter is undefined in meteor.startup.js if I use flow-router-ssr
.
from mantra.
@sammkj Have you changed your import to:
import { FlowRouter } from 'meteor/kadira:flow-router-ssr';
from mantra.
@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.
from mantra.
@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
from mantra.
Have you tried moving the file in a client folder or adding if (Meteor.isClient)?
from mantra.
Adding if (Meteor.isClient)
solved the problem. Thanks @eXon !
from mantra.
@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
from mantra.
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.
from mantra.
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)
from mantra.
@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.
from mantra.
@tonyxiao For more details about how I'm using redux + mantra, see: #103
It's not perfect yet, but it's working.
from mantra.
@swennemans sorry I meant could you show an example of how you use webpack with mantra, not redux with mantra.
from mantra.
Would love to use webpack with Mantra so I can include module-specific images in the Mantra module instead of the /public
folder!
from mantra.
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.
from mantra.
@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.
from mantra.
Related Issues (20)
- Correct Way to Install a Bootstrap Theme? HOT 3
- Controllers and server-side context HOT 3
- Where is the best place to put your initial states with Reactive Dict/Local State HOT 1
- Unable to sign up /login on Mantra talk HOT 4
- should we use sub-manager for mantra ? HOT 2
- A linter for Mantra
- Accounts.onPasswordResetLink .... where??
- Dead link for Mantra live demo HOT 2
- Support Apollo HOT 1
- Meteor/MiniMongo is Local State HOT 1
- Global Subscription HOT 6
- Issue with re-rendering on Google Chrome Android (Moblie)
- Meteor methods in lib folder HOT 1
- Problem with Routing and Alert
- More intuitive react component naming convention HOT 4
- Ability to module-namespace actions HOT 13
- Issue with Mobile HOT 1
- how to get REF of containers component
- Clarify module meaning HOT 5
- Problems with @storybook/mantra-core and react-komposer@2 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mantra.