didi0613/switch-to-oss-app-archeype.md

## switch-to-oss-app-archeype.md

      
    Raw
  

              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