Magento – installing & using reactjs in magento 1.9

3rd-party-librarycomposerjavascriptmagento-1.9npm

Im trying to run reactjs library in my magento 1.9 website. reactjs can be run in php server using v8js-php consequently it could work.

many reactjs components are installed using composer:

a- its possible to use NPM and composer in magento 1.9?
b- anyone has a github or similar displaying a reactjs installation with magento 1.9?

Best Answer

You certainly can use NPM and composer with magento 1.9. To setup your site using composer you'll need to create a composer.json file a good walkthrough is https://alanstorm.com/php_composer_magento_tutorial/

In Regards to getting React running you can just include the compiled JS files in your page. You can set this up via running npm init; npm install react react-dom --save-dev ..etc as taken from http://ccoenraets.github.io/es6-tutorial-react/setup/ ( i wont go into to much detail here on that).

This is an example of my webpack.config.js to compile my custom components.

var webpack = require('webpack');
var path = require('path');

var MODULE_BUILD_DIR = path.resolve(__dirname, 'lib/modulename/js/dist');
var MODULE_APP_DIR = path.resolve(__dirname, 'lib/modulename/js/src');

var config = {
  devtool: 'cheap-module-source-map',
  entry: {
    search: MODULE_APP_DIR + '/react/index.js',
  },
  output: {
    path: MODULE_BUILD_DIR,
    filename: '[name].min.js'
  },
  module : {
    loaders : [
      {
        test : /\.js?/,
        include : MODULE_APP_DIR,
        exclude: path.resolve(__dirname, 'node_modules'),
        loader : 'babel-loader',
        query: {
          presets : ["env", "react"]
        }
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
      },
      output: {
        comments: false,
      },
      beautify: false,
      mangle: true,
      sourcemap: true,
    }),
    new webpack.HashedModuleIdsPlugin()
  ],
  resolve: {
    extensions: ['.js'],
    alias: {
      'customComponents': path.resolve(__dirname, MODULE_APP_DIR + '/react/Components')
    },
    modules: [
      MODULE_APP_DIR,
      path.resolve(__dirname, 'node_modules')
    ]
  }
};

module.exports = config;

Once you have that all setup and you've written some components then compiled the JS using webpack you should have a js file called react.min.js as setup in the webpack above. This should have been outputted in the 'ib/modulename/js/dist folder and all your react components should be located in lib/modulename/js/src.Now all you now need to do is to add the compiled js to the page through your local.xml:

<?xml version="1.0"?>
<layout version="0.1.0">
  <default>
    <reference name="head">
        <action method="addJs">
            <script>lib/modulename/js/dist/react.min.js</script>
        </action>
    </reference>
  </default>
</layout>
Related Topic