Switch to OSS app archetype

switch-to-oss-app-archeype.md

Switch to OSS app archetype

Changes Required

• Update your dependencies inside package.json

  Switch internal app archetype

  @walmart/electrode-archetype-react-app
  @walmart/electrode-archetype-react-app-dev
  

  to

  dependencies: {
    "electrode-archetype-react-app": "^5.0.0",
  },
  devDependencies: {
    "electrode-archetype-react-app-dev": "^5.0.0"
    "xclap": "0.2.22"
  }
  

• Update your task runner from builder|gulp to xclap

  For example, from gulp tp clap:

  "build": "gulp build-vendor && gulp build", => "build": "clap build-vendor && clap build",
  "build-vendor": "gulp build-vendor", => "build-vendor": "clap build-vendor",
  "help": "gulp help", => "help": "clap help",
  "dev": "gulp dev", => "dev": "clap dev",
  "hot": "gulp hot", => "hot": "gulp hot",
  "start": "gulp server", => "start": "clap server",
  "test-frontend": "gulp test-frontend-cov", => "test-frontend": "clap test-frontend-cov",
  "test": "gulp npm:test", => "test": "clap npm:test",
  "lint": "gulp lint && npm run automation-lint" => "lint": "clap lint && npm run automation-lint"
  

• Update your .babelrc file:

  • Update your src/client/.babelrc to

    {
      "extends": "electrode-archetype-react-app-dev/config/babel/babelrc-client"
    }
    

  • Update your src/server/.babelrc to

    {
      "extends": "electrode-archetype-react-app-dev/config/babel/babelrc-server"
    }
    

  • Update your test/client/.babelrc to

    {
      "extends": "electrode-archetype-react-app-dev/config/babel/babelrc-client"
    }
    

• Update your .eslintrc file:

  • Update your src/client/.eslintrc to

    ---
    extends:
      - "electrode-archetype-react-app-dev/config/eslint/.eslintrc-react"
    

  • Update your src/server/.eslintrc to

    ---
    extends:
      - "electrode-archetype-react-app-dev/config/eslint/.eslintrc-node"
    

  • Update your test/client/.eslintrc to

    ---
    extends:
      - "electrode-archetype-react-app-dev/config/eslint/.eslintrc-react-test"
    

• Update src/server/index.js to:

  import support from "electrode-archetype-react-app/support";
  

• Remove unnecessary files if you have below

  gulpfile.js
  

• Add xclap.js to your root dir for task runner. Copy the contents below:

  require("electrode-archetype-react-app")();
  

  There are few ENV vars can be enabled inside xclap.js:

  • Tell Electrode app archetype that you want to use ES6 syntax in your server code process.env.SERVER_ES6 = true;

  • Enable webpack's NodeSourcePlugin to simulate NodeJS libs in browser process.env.ENABLE_NODESOURCE_PLUGIN = true;

  • Use PhantomJS to run your Karma Unit tests. Default is "chrome" (Chrome Headless) process.env.KARMA_BROWSER = "phantomjs";

  • Turn off using electrode-webpack-reporter to show visual report of your webpack, compile results when running in dev mode with clap dev process.env.HTML_WEBPACK_REPORTER_OFF = true;

  • Use a custom host name instead of localhost, and a diff port instead of 2992, for webpack dev server when running in dev mode with clap dev process.env.WEBPACK_DEV_HOST = "dev.mymachine.net"; process.env.WEBPACK_DEV_PORT = 8100;

  • Enable HTTPS for webpack dev server when running in dev mode with clap dev process.env.WEBPACK_DEV_HTTPS = true;

Following Steps

• Reinstall node modules After you did the updates above, please remove your node_modules and reinstall the dependencies and see if you got any errors:

  rm -rf node_modules
  rm -rf package-lock.json
  npm install
  

• Check the tests and fix the errors if any

  npm run test
  

• Check the demo and fix the errors if any

  clap dev