-
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
toxclap
For example, from
gulp
tpclap
:"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;
-
-
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