1.0.2 • Published 6 years ago

zalopay-react-scripts v1.0.2

Weekly downloads
4
License
MIT
Repository
github
Last release
6 years ago

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)
  1. Add necessary dependency to template/.template.dependencies.json
  2. Increase version in package.json
  3. 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) {