Page does not reload automatically

[vikramjit575]

Hi, i ran this code and its working fine but the page is not reloading automatically.For eg after adding an item in cart i have to refresh the page and after that changes are reflected in the cart.i also added spring-dev tools dependency but its not working.can you please help on that. Thank you

[eh3rrera]

Hi @vikramjit575,

About adding items, maybe there's something wrong with your Pusher information, did you created your Pusher app in the USA cluster? Otherwise you have to specify the cluster when creating the Pusher instance (for example, eu for Europe) In the dev console of you browser, does an error show up?

About spring-dev tools, can you provide more detail, what do you mean is not working?

[vikramjit575]

Hi, I created the app in Mumbai cluster and I did not update it in my code.May be that's why it did not work but how would it impact the auto reload?

[eh3rrera]

Well, actually the app doesn't need to be reloaded.

When you add an item, an AJAX call is made to the server to store in the HTTP session that item and trigger a Pusher event. When that Pusher event is received on the page, React updates the interface without reloading.

And since the content cart is stored in the session, it is not lost and it's shown after reloading the page.

If you created your app in Mumbai, you have to add after the line https://github.com/eh3rrera/shopping-cart-pusher/blob/master/src/main/resources/static/js/app.js#L8: cluster: 'ap2',

And in the server (after line https://github.com/eh3rrera/shopping-cart-pusher/blob/master/src/main/java/com/pusher/web/CartController.java#L47): pusher.setCluster("ap2");

[vikramjit575]

Hi, thanks a lot:)

I finally got my issue resolved and its working fine.Have you done the same thing using webpack?I am doing it with webpack and i am struggling to run pusher and fetch in it.

thanks a lot for getting my issue resolved

[eh3rrera]

Yes, it's very similar. You install pusher with NPM (npm install pusher-js) and import the module like this:

import React, { Component } from 'react';
...
import Pusher from 'pusher-js';

export default class Index extends Component {
...
componentWillMount() {
    this.pusher = new Pusher(...);
    ...
  }
...
}

And your webpack.config.js file can be something as simple as:

var path = require('path');

module.exports = {
  entry: ['./src/app.js'],

  output: {
    filename: 'public/js/bundle.js',
    sourceMapFilename: 'public/js/bundle.map'
  },

  devtool: '#source-map',

  module: {
    loaders: [
      {
        loader: 'babel',
        exclude: /node_modules/
      }
    ]
  }
}

Where /src/app.js is the starting point of your app, like:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import Index from './components/index';

ReactDOM.render(<Index />, document.getElementById("app"));

Hope it helps

[vikramjit575]

Here is a glimpse of my code

Webpack-config.js ` var path = require('path');

module.exports = { entry: './src/main/resources/static/js/app.js', output: { path: __dirname + '/src/main/webapp/public', filename: 'bundle.js', sourceMapFilename: 'bundle.map' }, devtool: '#source-map', module: { loaders: [ { test: /.js?$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['es2015', 'react'] } } ] }, node: { net: 'empty', tls: 'empty', dns: 'empty' } }; App.js import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import Pusher from 'pusher-js'; import Header from 'C:/Users/vikramjit.saini/Desktop/ReactWork/shopping-cart-pusher-master/src/main/resources/static/js/components/header.js'; import CartItem from 'C:/Users/vikramjit.saini/Desktop/ReactWork/shopping-cart-pusher-master/src/main/resources/static/js/components/cartItem.js'; import Cart from 'C:/Users/vikramjit.saini/Desktop/ReactWork/shopping-cart-pusher-master/src/main/resources/static/js/components/cart.js'; import Product from 'C:/Users/vikramjit.saini/Desktop/ReactWork/shopping-cart-pusher-master/src/main/resources/static/js/components/product.js'; import ProductList from 'C:/Users/vikramjit.saini/Desktop/ReactWork/shopping-cart-pusher-master/src/main/resources/static/js/components/productList.js';

var App = React.createClass({ getInitialState: function() { return { items: [], products: [] }; }, ..... render: function() { return (

);

} });

ReactDOM.render(, document.getElementById("app"));`

Index.html `<!DOCTYPE html>

Create a Free Account

My Title

My Button

` Also i have some doubts: - You did not mention any dependency for fetch in webpack - how this would be configured in react component? Thanks

[eh3rrera]

All right, I see that in your configuration Webpack is creating a bundle.js file. This should be the JS script included in your HTML file.

Your entry point is app.js, which imports the rest of the scripts, then this is where you should import fetch too.

For defining your Pusher key and channel name there a lot of options. You can hardcode them in your React class, or leave them as they are in the example and include the bundle.js script after they're defined, you can include something like an .env.js file, or I think Webpack can also help with its DefinePlugin, I don't know you can google something like server-side variables to client-side in React.

[vikramjit575]

Hi I am not able to run pusher and fetch through webpack.Do i need to add some loaders or anything else for them in webpack.config.js?

[eh3rrera]

No, what's the error?

[vikramjit575]

Webpack is compiling everything successfully.i don't see any error.i think there might be some plugin or something.npm pusher dependency alone is not working

[eh3rrera]

I guess I could take a look at your code sometime this week, can you upload it somewhere so I can test it?

[vikramjit575]

I am trying to run your application in with webpack and it is running successfully except these dependecies

1.import Pusher from 'pusher-js'; 2.import fetch from 'fetch-js'

are not working.

[vikramjit575]

Can i use pusher and fetch cdn with webpack?

[eh3rrera]

I don't know what could be wrong.

Yes, you can use them as externals, https://webpack.github.io/docs/library-and-externals.html.

I don't mean to be rude, but maybe you should read/watch some tutorials about Webpack, this is not related to the app anymore.