zalopay-react-scripts

zalopay-react-scripts customize default template of react-scripts use for webapp in ZaloPay, other config can refer create-react-app docs

Usage

create-react-app myappname --scripts-version zalopay-react-scripts

Template Structure

|
|__deploy
|
|__public
|  |__static
|  |  |__js
|  |  |
|  |  |__images
|  |
|  |__index.html
|
|__src
|__.env
|__.env.development
|__.env.production
|__.env.sandboxqc
|__.env.staging

• deploy: includes Python script, Docker file support for deployment
• public/static/js: js library (minify version)
• public/static/images: icon, image file use in public/index.html
• Folder public/static will be copied to SVN when deploy (see Deployment section)
• src: source code, similar to create-react-app
• .env: includes environment variable

Available Command

• yarn start: start project in dev mode, enviroment variable declared in .env.development will be used
• yarn deploy: support build and deploy app

Deployment

Requirement

• Install Python3
• Install Docker
• System Environment Variable: ZALOPAY_SVN

Docker

Build app, serve on port 8080

APP_ENV: [sandboxqc, staging, production]

image_tag: deployment environment + version

docker_image: register_gitlab_repo + image_tag

Step 0:

Contact SO to get:

• register_gitlab_repo
• jenkins_link

Step 1:

yarn deploy

• Select deployment environment, environment variable declared in .env.sandboxqc, .env.staging, .env.production will be used corresponding
• Input build version, if it is null, version in package.json will be used

Python Script will:

• Build webapp.dockerfile then return docker image (image_tag, version)
• Copy static resource to SVN

Step 2:

• Commit, sync resource to static server
• Push docker image to Container Registry

docker push docker_image

Step 3:

• Login to Jenkins (jenkins_link)
• Build with Parameters -> Input image_tag -> Build

Ejecting

Unless you want to customize more config (webpack, babel,...), otherwise don't need to eject

Because zalopay-react-scripts almost only customize template code, then you still can eject like react-scripts

yarn eject

After eject, if you get error like "Cannot find module '@babel/plugin-transform-react-jsx'", you can try

rm -rf node_modules && yarn

See more: https://github.com/facebook/create-react-app/issues/6099

Update template

1. Update source code in template folder

• .eslintrc: code style
• gitignore: will be renamed to .gitignore when new project was created (IMPORTANT: gitignore, not ~~.gitignore~~)

2. Add necessary dependency to template/.template.dependencies.json
3. Increase version in package.json
4. Publish to npm

npm publish

Changelog

Main different of zalopay-react-scripts from react-scripts version 3.2.0

Version 1.0.2

• Update package name, default support scss

--- a/react-scripts/package.json
+++ b/zalopay-react-scripts/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "react-scripts",
-  "version": "3.2.0",
+  "name": "zalopay-react-scripts",
+  "version": "1.0.2",
   "description": "Configuration and scripts for Create React App.",
   "repository": {
     "type": "git",
@@ -60,6 +60,7 @@
     "mini-css-extract-plugin": "0.8.0",
+    "node-sass": "^4.12.0",
     "optimize-css-assets-webpack-plugin": "5.0.3",

• Don't need to add eslint config to package.json when eject, we use .eslintrc

--- a/react-scripts/scripts/eject.js
+++ b/zalopay-react-scripts/scripts/eject.js
@@ -238,13 +238,14 @@ inquirer
       presets: ['react-app'],
     };

+    // we use .eslintrc
     // Add ESlint config
-    if (!appPackage.eslintConfig) {
-      console.log(`  Adding ${cyan('ESLint')} configuration`);
-      appPackage.eslintConfig = {
-        extends: 'react-app',
-      };
-    }
+    // if (!appPackage.eslintConfig) {
+    //   console.log(`  Adding ${cyan('ESLint')} configuration`);
+    //   appPackage.eslintConfig = {
+    //     extends: 'react-app',
+    //   };
+    // }

     fs.writeFileSync(
       path.join(appPath, 'package.json'),

• Update default script, environment variable supported, install template's dependency

--- a/react-scripts/scripts/init.js
+++ b/zalopay-react-scripts/scripts/init.js
@@ -95,10 +95,14 @@ module.exports = function(

   // Setup the script rules
   appPackage.scripts = {
-    start: 'react-scripts start',
+    start: 'env-cmd -f .env.development react-scripts start',
+    'build:sandboxqc': 'env-cmd -f .env.sandboxqc react-scripts build',
+    'build:staging': 'env-cmd -f .env.staging react-scripts build',
+    'build:production': 'env-cmd -f .env.production react-scripts build',
     build: 'react-scripts build',
+    deploy: 'python3 deploy/build.py',
     test: 'react-scripts test',
-    eject: 'react-scripts eject',
+    eject: 'react-scripts eject'
   };

   // Setup the eslint config
@@ -182,7 +186,8 @@ module.exports = function(
     command = 'npm';
     args = ['install', '--save', verbose && '--verbose'].filter(e => e);
   }
-  args.push('react', 'react-dom');
+  // react, react-dom are installed with react-scripts
+  // args.push('react', 'react-dom');

   // Install additional template dependencies, if present
   const templateDependenciesPath = path.join(
@@ -202,15 +207,13 @@ module.exports = function(
   // Install react and react-dom for backward compatibility with old CRA cli
   // which doesn't install react and react-dom along with react-scripts
   // or template is presetend (via --internal-testing-template)
-  if (!isReactInstalled(appPackage) || template) {
-    console.log(`Installing react and react-dom using ${command}...`);
-    console.log();
+  console.log(`Installing template dependencies using ${command}...`);
+  console.log();

-    const proc = spawn.sync(command, args, { stdio: 'inherit' });
-    if (proc.status !== 0) {
-      console.error(`\`${command} ${args.join(' ')}\` failed`);
-      return;
-    }
+  const proc = spawn.sync(command, args, { stdio: 'inherit' });
+  if (proc.status !== 0) {
+    console.error(`\`${command} ${args.join(' ')}\` failed`);
+    return;
   }

   if (useTypeScript) {