6

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?

  • Did you ever get this one working? – rob3000 Feb 22 '18 at 23:57
  • @rob3000 no.... – s_h Feb 23 '18 at 18:37
1

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>
0

a. It is possible and is practiced across many magento agencies. you may heard of magento-composer-installer

b. Never heard of it before, but found very similar project on github calld Magento-react

composer.json speaks for itself

"require": {
    "bragento/magento-composer-installer": "~1",
    "magento/core": "1.9.1.*",
    "colinmollenhour/modman": "*",
    "reactjs/react-php-v8js": "dev-master"
},
  • npm is not a problem at all, i had success integrating gruntjs with many plugins into magento1.9 – Vladimir Samsonov Feb 23 '18 at 11:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.