multiple fixes

Author: matheusmr13

packages/cli/bin/index.js

@@ -21,13 +21,16 @@ program
 
     File example "${chalk.italic('my-config.json')}":
     ${chalk.bold(`
+    {
+      "proxyUrl": "https://my-aplication-url.com",
       "microfrontends": {
         "my-microfrontend1": "/path/to/microfrontend1/root",
         "my-microfrontend2": "/path/to/microfrontend2/root"
       },
       "app": {
         "my-webapp": "/path/to/app/root"
       }
+    }
     `)}
   `
   )
@@ -49,6 +52,12 @@ program
     - a devserver running just with your current microfrontend (where you started this command) in development
   `
   )
+  .option(
+    '-w, --webapp',
+    `
+    Combined with --proxy, put this container as proxy root.
+  `
+  )
   .option(
     '-a, --all <webapp_package_name>',
     `
@@ -73,6 +82,7 @@ program
       opts.configurationFile = options.configurationFile;
     } else if (options.proxy) {
       type = start.TYPE.PROXY;
+      opts.isContainer = options.webapp;
       opts.url = options.proxy;
     } else if (options.all) {
       type = start.TYPE.LOCAL;

packages/cli/scripts/start/all.js

@@ -1,35 +1,41 @@
-
 const { microfrontendFolderName, getPackagesFromConfig } = require('../utils/config');
 const { writeJson } = require('../utils/fs');
 const { escapePackageName } = require('../utils/paths');
 const startSingleApp = require('./single');
-
+const startProxyServer = require('./proxy-server');
+const { getMetaFromUrl } = require('./proxy');
 
 const startMultipleLocations = async (configurationFilePath, opts = {}) => {
-  const {
-    microfrontends,
-    app,
-  } = await getPackagesFromConfig(configurationFilePath, opts);
+  const { microfrontends, app, proxyUrl } = await getPackagesFromConfig(configurationFilePath, opts);
 
   const INITIAL_PORT = 3001;
 
-  const metaJson = Object.keys(microfrontends).reduce((agg, packageName, i) => Object.assign(agg, {
-    [escapePackageName(packageName)]: {
-      host: `http://localhost:${INITIAL_PORT + i}`,
-    },
-  }), {});
+  const metaJson = Object.keys(microfrontends).reduce(
+    (agg, packageName, i) =>
+      Object.assign(agg, {
+        [escapePackageName(packageName)]: {
+          host: `http://localhost:${INITIAL_PORT + i}`,
+        },
+      }),
+    {}
+  );
 
   const pathToAppPackage = Object.values(app)[0];
 
-  await writeJson(`${pathToAppPackage}/public/${microfrontendFolderName}/meta.json`, metaJson);
+  const envJson = await getMetaFromUrl(proxyUrl);
+  await writeJson(`${pathToAppPackage}/public/${microfrontendFolderName}/meta.json`, {
+    ...envJson,
+    ...metaJson,
+  });
 
-  Object.values(microfrontends)
-    .forEach((packagePath, i) => startSingleApp({
+  Object.values(microfrontends).forEach((packagePath, i) =>
+    startSingleApp({
       pathToPackage: packagePath,
       port: INITIAL_PORT + i,
       isMicro: true,
       isRunningAll: true,
-    }));
+    })
+  );
 
   startSingleApp({
     pathToPackage: pathToAppPackage,

packages/cli/scripts/start/index.js

@@ -1,6 +1,9 @@
 const startProxyServer = require('./proxy-server');
 const startLocalAll = require('./all');
 const startSingle = require('./single');
+const { writeJson } = require('../utils/fs');
+const { resolveApp } = require('../utils/paths');
+const { getMetaFromUrl } = require('./proxy');
 
 const TYPE = {
   SINGLE: 'SINGLE',
@@ -15,10 +18,15 @@ const start = (type, opts) => {
       const { configurationFile } = opts;
       startLocalAll(configurationFile, opts);
     },
-    [TYPE.PROXY]: () => {
-      const { url } = opts;
-      startProxyServer(url);
-      startSingle({ port: 3001, isMicro: true });
+    [TYPE.PROXY]: async () => {
+      const { url, isContainer } = opts;
+      if (!isContainer) {
+        startProxyServer(url);
+      } else {
+        const envJson = await getMetaFromUrl(url);
+        await writeJson(resolveApp('public/microfrontends/meta.json'), envJson);
+      }
+      startSingle({ port: isContainer ? 3000 : 3001, isMicro: !isContainer });
     },
   }[type]());
 };

packages/cli/scripts/start/proxy-server.js

@@ -4,7 +4,7 @@ const axios = require('axios');
 const { readJson } = require('../utils/fs');
 const { escapePackageName, appPackageJson } = require('../utils/paths');
 
-const startProxyServer = async (proxyUrl) => {
+const startProxyServer = async (proxyUrl, opts = {}) => {
   const packageJson = await readJson(appPackageJson);
   const app = express();
   const PORT = 3000;
@@ -14,21 +14,29 @@ const startProxyServer = async (proxyUrl) => {
   const namespace = url.pathname;
 
   app.get(`${namespace}microfrontends/meta.json`, (_, res) => {
-    axios.get(`${proxyUrl}microfrontends/meta.json`).then(response => response.data).then((json) => {
-      res.json({
-        ...json,
-        [escapedPackageName]: { host: 'http://localhost:3001' },
+    axios
+      .get(`${proxyUrl}microfrontends/meta.json`)
+      .then((response) => response.data)
+      .then((json) => {
+        res.json({
+          ...json,
+          [escapedPackageName]: { host: 'http://localhost:3001' },
+        });
       });
-    });
   });
 
-  app.use(namespace, proxy(proxyUrl, {
-    proxyReqPathResolver: req => `${namespace}${req.url}`,
-  }));
+  app.use(
+    namespace,
+    proxy(proxyUrl, {
+      proxyReqPathResolver: (req) => `${namespace}${req.url}`,
+    })
+  );
 
   app.use('/', proxy(url.origin));
 
-  app.listen(PORT, () => console.log(`Example app listening on PORT ${PORT}! Access localhost:${PORT}${namespace} to see your app`));
+  app.listen(PORT, () =>
+    console.log(`Example app listening on PORT ${PORT}! Access localhost:${PORT}${namespace} to see your app`)
+  );
 };
 
 module.exports = startProxyServer;

packages/cli/scripts/start/proxy.js

@@ -0,0 +1,21 @@
+const axios = require('axios');
+
+const getMetaFromUrl = async (url) => {
+  const envJson = await new Promise((resolve) => {
+    axios
+      .get(`${url}microfrontends/meta.json`)
+      .then((response) => response.data)
+      .then((json) => {
+        resolve(json);
+      });
+  });
+  Object.values(envJson).forEach((envJson) => {
+    envJson.js = envJson.js.map((pathToFile) => pathToFile.replace('./', url));
+  });
+
+  return envJson;
+};
+
+module.exports = {
+  getMetaFromUrl,
+};

packages/cli/scripts/utils/fs.js

@@ -1,7 +1,8 @@
 const { promises: fs, existsSync, rmdirSync } = require('fs');
 const path = require('path');
+const reactAppRewired = require('react-app-rewired');
 
-const mkdir = (dir) => fs.mkdir(dir, { recursive: true });
+const mkdir = dir => fs.mkdir(dir, { recursive: true });
 const isDirectory = async (source) => {
   const stat = await fs.stat(source);
   return stat.isDirectory();
@@ -31,7 +32,7 @@ const copyFolder = async (src, dest) => {
       } else {
         await copyFile(srcFile, destFile);
       }
-    })
+    }),
   );
 };
 
@@ -58,31 +59,10 @@ const copyTemplateTo = async (template, pathToFolder) => {
 
 const getDirsFrom = async (source) => {
   const paths = await fs.readdir(source);
-  return paths.map((name) => path.join(source, name)).filter(isDirectory);
+  return paths.map(name => path.join(source, name)).filter(isDirectory);
 };
 
-const getReactAppRewiredPath = async () => {
-  const options = [
-    `${__dirname}/../../../../react-app-rewired/bin/index.js`,
-    `${__dirname}/../../../node_modules/react-app-rewired/bin/index.js`,
-  ];
-
-  const libInfos = await Promise.all(
-    options.map(async (option) => ({
-      option,
-      exists: await (async () => {
-        try {
-          await fs.access(option);
-          return true;
-        } catch (e) {
-          return false;
-        }
-      })(),
-    }))
-  );
-
-  return libInfos.find((lib) => lib.exists).option;
-};
+const getReactAppRewiredPath = async () => `${reactAppRewired.paths.ownPath}/../react-app-rewired/bin/index.js`;
 
 const rm = async (pathTo) => {
   if (!existsSync(pathTo)) return Promise.resolve();
@@ -99,10 +79,10 @@ const rm = async (pathTo) => {
 const getDirectories = async (source) => {
   const all = await fs.readdir(source);
   const mappedFolders = await Promise.all(
-    all.map(async (fileOrFolder) => ({
+    all.map(async fileOrFolder => ({
       fileOrFolder,
       isDirectory: await isDirectory(path.join(source, fileOrFolder)),
-    }))
+    })),
   );
 
   return mappedFolders.filter(({ isDirectory: isDir }) => isDir).map(({ fileOrFolder: folder }) => folder);
@@ -120,7 +100,7 @@ const getAllFilesFromDir = async (dir, allFiles = []) => {
       } else {
         allFiles.push(fullDir);
       }
-    })
+    }),
   );
   return allFiles;
 };

packages/doc/docs/backoffice/developing.md

@@ -11,7 +11,7 @@ If you are using aws s3 as your artifact's host, login in into aws cli and then
 
 Create a .env.development.local with some envs:
 
-```
+```bash
 # Core configs
 
 database_config='{"host":"my.host", "port": 5432, "username": "my-user", "password": "my-password", "database": "my-db}'
@@ -22,10 +22,38 @@ firebase_config='FIREBASE_CONFIG_JSON' # https://firebase.google.com/docs/web/se
 aws_profile='my-profile'
 AWS_SDK_LOAD_CONFIG=1 # needed to use a profile
 AWS_ARTIFACTS_BUCKET='some-bucket-with-all-artifacts'
+AWS_REGION='your-amazon-region'
 ```
 
 Run a script:
 
 `./scripts/start.js`
 
 Access your backoffice: http://localhost:3333/
+
+## Generating db migration
+
+Create a file at `/packages/server/ormconfig.json` with this content:
+
+```json
+{
+  "host": "my.host",
+  "port": 5432,
+  "username": "my-user",
+  "password": "my-password",
+  "database": "my-db",
+  "type": "postgres",
+  "migrations": ["migration/*.js"],
+  "entities": ["./dist/src/entity/*.js"],
+  "cli": {
+    "migrationsDir": "migration"
+  }
+}
+```
+
+Make sure you have `typeorm` installed globally:
+
+```bash
+npm i -g typeorm
+typeorm migration:generate -n <FEATURE_NAME>
+```

packages/doc/docs/cli/future.md

@@ -0,0 +1,13 @@
+---
+id: future
+title: Future
+---
+
+## Just brainstorming with ideas
+
+Cli should become 3 different packages:
+
+- `scripts` to be used by apps and microfrontends to build/start (`cmra start` and `cmra build`)
+- `create` to create modules (`cmra create`)
+- `cli` to access backofffice API (does not exist today)
+- should `cmra publish` and `cmra deploy` be on cli or scripts?

packages/server/.gitignore

@@ -21,4 +21,6 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+ormconfig.json
+
 firebase-admin-sdk-key.json

packages/server/migration/1598384168452-PostRefactorin.ts

@@ -0,0 +1,13 @@
+import { MigrationInterface, QueryRunner } from 'typeorm';
+
+export class ProjectLink1598386312520 implements MigrationInterface {
+  name = 'ProjectLink1598386312520';
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`ALTER TABLE "microfrontend" ADD "projectLink" character varying`);
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`ALTER TABLE "microfrontend" DROP COLUMN "projectLink"`);
+  }
+}

packages/server/migration/1598386312520-ProjectLink.ts

@@ -11,7 +11,7 @@ interface AwsS3Config {
   token: string;
 }
 
-const s3 = new AWS.S3({ region: 'sa-east-1' });
+const s3 = new AWS.S3({ region: process.env.AWS_REGION });
 
 class AwsS3Integration extends Integration {
   static async downloadArtifact(artifactPath: string, opts: { path: MicrofrontendDeployPath }) {

packages/server/src/entity/integration/aws-s3.ts

@@ -43,7 +43,7 @@ class Microfrontend extends BaseEntity {
   @Column()
   public packageName: string = '';
 
-  @Column()
+  @Column({ nullable: true })
   public projectLink: string = '';
 
   @Column({ nullable: true })