juliancwirko / react-redux-webpack-meteor Goto Github PK
View Code? Open in Web Editor NEWReact demo app with Webpack, Redux and Meteor as a backend only
License: MIT License
React demo app with Webpack, Redux and Meteor as a backend only
License: MIT License
[HMR] The following modules couldn't be hot updated: (They would need a full reload!)
I cannot get the Meteor devtools to work this approach. Is this just a known trade-off or am I doing something wrong? I am not passing any additional configuration options.
I tried this
.after-header
background #1fc8db unquote('url(/images/hero1.jpg)') no-repeat center top !important;
but the image won't show up. Do you mind help
Currently, the client project uses v1.3.0 of react-hot-loader.
There are quite a few issues with that old version, which are fixed by the recent 3.0 beta versions. Would you please consider updating to that version? (There are examples out there about using that.)
Thanks.
Hey Julian,
I really like this approach and the only downside I can come up with atm is that you loose Meteors optimistic UI, since the meteor methods are only executed server side. What is your take on that? One would need to find a way, to write the logic inside meteor methods so generic that it could be used in reducers, or just duplicate business logic on the client (which obviously is more work, but how most of the other apps/frameworks outside of Meteor do it)
I think optimistic UI for free is still one of - and maybe the only - the benefits of using Meteor also client side.
Thanks for creating this repo and getting the community to explore different directions ๐
Hey, thanks for the amazing post and work. I also love both React and Meteor.
I was wondering if I can use this example as a base for a small personal project that will also be on GitHub (MIT).
Hi there,
I really like the concept behind your boilerplate of separating the frontend from the backend.
I am trying to update the whole boilerplate starting from WebPack.
The version included in your boilerplate is WebPack 1 if I am not mistaken.
I tried upgrading it to version 3. Apparently I only need to upgrade it to the version 2 since upgrading to version 3 is smooth and done through the command line via updating WebPack only.
I followed mainly the official guide and some other separate ressources of course to try to modify the "webpack.config.js" file.
I ended up with the following "webpack.config.js" file:
var sGrid = require('s-grid');
var rupture = require('rupture');
var autoprefixer = require('autoprefixer');
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devtool: 'eval',
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./app/App.js'
],
output: {
pathinfo: true,
path: path.resolve(__dirname, 'public'),
filename: 'bundle.js',
publicPath: 'http://localhost:3000/'
},
plugins: [
new webpack.LoaderOptionsPlugin({
options: {
//postcss: [autoprefixer],
context: __dirname,
minimize: true
//stylus: [sGrid, rupture]
}
}),
new HtmlWebpackPlugin({
title: 'React with Webpack and Redux - Meteor as a backend only!',
template: './index_template.ejs',
inject: 'body'
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true, //in WebPack 2 it defaults to false so need to be explicitly set.
compress: {
warnings: true
}
})
],
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: ['babel-loader'] //'use' and 'loaders' are interchangeable
},
{
test: /\.css$/, //scss??
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
sourceMap: true,
importLoaders: 2,
localIdentName: '[name]__[local]__[hash:base64:5]',
//plugins: autoprefixer,//WTF??
}
},
{
loader: 'postcss-loader',
options: {
plugins: function(){
return [autoprefixer]
}
}
}
]
//loader: 'style!css?sourceMap&importLoaders=2&localIdentName=[name]__[local]__[hash:base64:5]!postcss'
},
{
test: /\.styl$/,
exclude: /(node_modules|bower_components)/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options:{
sourceMap: true,
modules: true,
importLoaders: 2,
localIdentName: '[name]__[local]__[hash:base64:5]'
//plugins: sGrid, rupture
}
},
{
loader: 'postcss-loader',
options: {
plugins: function(){
return [autoprefixer]
}
}
},
{
loader: 'stylus-loader',
options: {
plugins: function(){
return [sGrid, rupture]
}
}
}
]
// loader: 'style!css?sourceMap&modules&importLoaders=2&localIdentName=[name]__[local]__[hash:base64:5]!postcss!stylus-loader'
},
{
test: /\.(png|jpg)$/,
exclude: /(node_modules|bower_components)/,
use: [
{
loader: 'url-loader',
options:{
name: 'images/[name].[ext]',
limit: '8192' //Maybe INT????
}
}
]
//loader: 'url-loader?name=images/[name].[ext]&limit=8192'
}
]
},
resolve: {
//root: path.join(__dirname, '..', 'app'),
modules: [
path.join(__dirname, "app"), // 2 or 3 arguments??
"node_modules"
],
extensions: ['.js', '.jsx', '.json', '.css', '.styl', '.png', '.jpg', '.jpeg', '.gif'],
enforceModuleExtension: false
},
/* stylus: function () {
return [sGrid, rupture]
},*/
/* postcss: function () {
return [autoprefixer];
}*/
};
Still when I run npm start
fron the client side I get the error in the picture attached, which is not really verbose. I can't pin the exact problem.
This is the debug file from npm.
2017-08-17T23_03_54_168Z-debug.txt
I would highly appreciate your help on this, and I apologize i this is not the right place for this question.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.