@common-stack/generate-plugin 6.0.6-alpha.7 → 6.0.6-alpha.71

package/lib/generators/add-frontend/templates/tools/checkQueryUsage.mjs

@@ -0,0 +1,192 @@
+import fs from 'fs';
+import path from 'path';
+import glob from'glob';
+
+// Regex to find `use<QueryName>Query` calls, capturing query name and arguments
+const queryPattern = /use([A-Za-z0-9]+Query)\(([^)]*)\)/g;
+const fileExtensions = ['.js', '.ts', '.jsx', '.tsx'];
+const excludeFiles = ['react-hooks', 'generated'];
+const basePath = process.cwd();
+
+const findPackageJsonFiles = () => {
+  const monorepoRoot = path.join(basePath, '..', '..');
+  return new Promise((resolve, reject) => {
+    glob(
+      `${monorepoRoot}/+(servers|portable-devices|packages|packages-modules)/**/package.json`,
+      { nodir: true, ignore: '**/node_modules/**' },
+      (err, files) => {
+        if (err) reject(`Unable to scan directory: ${err}`);
+        resolve(files);
+      },
+    );
+  });
+};
+
+// Function to transform componentPath from `lib` to `src` path and handle package names
+const transformComponentPath = (componentPath, packageName) => {
+  return componentPath
+    .replace('/lib/', '/src/')
+    .replace(packageName + '/', '')
+    .replace('.js', '');
+};
+
+// Normalize file paths for consistent comparison (remove extensions and resolve absolute paths)
+const normalizePath = (filePath) => {
+  const resolvedPath = path.resolve(filePath).replace(/\.[jt]sx?$/, ''); // Remove .js, .ts, .jsx, .tsx extensions
+  return resolvedPath;
+};
+
+// Function to extract component paths and queries from routes.json
+async function extractComponentPathsAndQueries(routesFile, packageName) {
+  let componentQueries = {};
+
+  try {
+    const content = await fs.promises.readFile(routesFile, 'utf-8');
+    const routes = JSON.parse(content);
+
+    // Traverse routes to extract componentPath and queries
+    routes.forEach(routeObj => {
+      Object.keys(routeObj).forEach(routeKey => {
+        const route = routeObj[routeKey];
+        if (route.hasComponent && route.componentPath) {
+          const transformedPath = normalizePath(transformComponentPath(route.componentPath, packageName));
+          const queries = Object.keys(route.queries || {});
+          if (queries.length > 0) {
+            componentQueries[transformedPath] = queries;
+          }
+        }
+      });
+    });
+
+    console.log('Extracted components and queries from routes.json:', componentQueries);
+  } catch (err) {
+    console.error(`Error reading routes.json file: ${routesFile}`, err);
+  }
+
+  return componentQueries;
+}
+
+// Function to recursively search for useQuery in files and validate if the file is a data component
+async function checkFiles(dir, componentQueries) {
+  const files = await fs.promises.readdir(dir, { withFileTypes: true });
+
+  for (const file of files) {
+    const fullPath = path.join(dir, file.name);
+
+    if (file.isDirectory()) {
+      // Recurse into subdirectories
+      await checkFiles(fullPath, componentQueries);
+    } else if (fileExtensions.includes(path.extname(file.name)) && !excludeFiles.includes(path.parse(file.name).name)) {
+      await checkForInvalidQueryUsage(fullPath, componentQueries);
+    }
+  }
+}
+
+// Function to extract query details from a match
+const extractQueryDetails = (queryMatch) => {
+  const [fullMatch, queryName, queryArgs] = queryMatch;
+  return {
+    queryName,
+    fullMatch,
+    queryArgs: queryArgs.trim(),
+    isLazyQuery: queryName.endsWith('LazyQuery'),
+    hasCacheOnlyFetchPolicy: queryArgs.includes("fetchPolicy: 'cache-only'"),
+  };
+};
+
+// Function to check for query usage in a file and validate if it is allowed
+async function checkForInvalidQueryUsage(filePath, componentQueries) {
+  try {
+    const content = await fs.promises.readFile(filePath, 'utf-8');
+    let match;
+    const usedQueries = [];
+    const queriesMissingCacheOnly = [];
+    const queriesWithNoArguments = [];
+    const queryNames = [];
+
+    while ((match = queryPattern.exec(content)) !== null) {
+      const queryDetails = extractQueryDetails(match);
+      usedQueries.push(queryDetails);
+      queryNames.push(queryDetails.queryName);
+
+      // Ignore LazyQuery for fetchPolicy check
+      if (!queryDetails.isLazyQuery && !queryDetails.hasCacheOnlyFetchPolicy) {
+        queriesMissingCacheOnly.push(queryDetails.queryName);
+      }
+
+      // Check for queries without arguments
+      if (queryDetails.queryArgs === '') {
+        queriesWithNoArguments.push(queryDetails.queryName);
+      }
+    }
+
+    if (usedQueries.length > 0) {
+      const normalizedFilePath = normalizePath(filePath);
+      const isDataComponent = componentQueries[normalizedFilePath];
+
+      const warnings = [];
+
+      // Warning if a data component has more than 3 queries
+      if (isDataComponent && usedQueries.length > 3) {
+        warnings.push(`Warning: Data component "${filePath}" has more than 3 queries. Consider splitting into multiple data components with a layout component as the parent.`);
+      }
+
+      // Consolidate missing cache-only fetchPolicy warnings
+      if (queriesMissingCacheOnly.length > 0) {
+        warnings.push(`Warning: The following queries are missing fetchPolicy: "cache-only":\n    - ${queriesMissingCacheOnly.join('\n    - ')}`);
+      }
+
+      // Warn for queries without arguments (which could fetch all data)
+      if (queriesWithNoArguments.length > 0) {
+        warnings.push(`Warning: The following queries have no arguments and could fetch all data. Consider narrowing the search and using pagination:\n    - ${queriesWithNoArguments.join('\n    - ')}`);
+      }
+
+      // Warning for non-data components with queries
+      if (!isDataComponent) {
+        warnings.push(`Warning: File "${filePath}" is a non-data component (not listed in routes.json) but is using queries.`);
+      }
+
+      // Display queries first, then display all warnings together
+      if (warnings.length > 0) {
+        console.log('----------------------------------------------------');
+        console.log(`File: ${filePath}`);
+        console.log('Queries:');
+        usedQueries.forEach(query => console.log(`  - ${query.fullMatch}`)); // Display full query details
+        console.log('\nWarnings:');
+        warnings.forEach(warning => console.log(`  - ${warning}`));
+        console.log('----------------------------------------------------\n');
+      }
+    }
+  } catch (err) {
+    console.error(`Error reading file: ${filePath}`, err);
+  }
+}
+
+// Check in a single package
+async function checkPackage(packageDir, packageName) {
+  const routesFile = path.resolve(path.join(packageDir, './lib/routes.json'));
+  const sourceDir = path.resolve(path.join(packageDir, './src'));
+  let componentQueries = {};
+
+  if (fs.existsSync(routesFile)) {
+    console.log(`Extracting component paths and queries from ${routesFile}...`);
+    componentQueries = await extractComponentPathsAndQueries(routesFile, packageName);
+  }
+
+  console.log(`Searching for query usage in files under ${sourceDir}...`);
+  await checkFiles(sourceDir, componentQueries);
+}
+
+// Run the script
+(async () => {
+  console.log('Checking useQuery usage ...');
+
+  const packageJsonFiles = await findPackageJsonFiles();
+  for (const file of packageJsonFiles) {
+    const packageJson = JSON.parse(fs.readFileSync(file, 'utf8'));
+    const packageDir = path.dirname(file);
+    await checkPackage(packageDir, packageJson.name);
+  }
+
+  console.log('Completed checking useQuery usage.');
+})();

package/lib/generators/add-frontend/templates/tools/mergeConfig.js

@@ -1,6 +1,7 @@
 import fs from 'fs';
 import path from 'path';
 import { setupConfig } from '@common-stack/rollup-vite-utils/lib/utils/setupConfig.js';
+import { updateFromConfig } from '@common-stack/rollup-vite-utils/lib/rollup/rollupPluginUpdateFromConfig.js';
 import projectConfig from '../config.json' assert { type: 'json' };
 
 // Function to merge configurations
@@ -32,3 +33,5 @@ if (!gitignoreContent.includes('app')) {
   fs.appendFileSync(gitignorePath, '\napp\n');
   console.log('Added "app" to .gitignore');
 }
+
+updateFromConfig(finalConfigPath);

package/lib/generators/add-frontend/templates/vite.config.ts.template

@@ -14,24 +14,62 @@ import config from './app/cde-webconfig.json' assert { type: 'json' };
 
 // This installs globals such as "fetch", "Response", "Request" and "Headers".
 installGlobals();
+
 const directoryName = dirname(fileURLToPath(import.meta.url));
 
-export default defineConfig(({ isSsrBuild }) => {
-    console.log('---IS SSR BUILD', isSsrBuild);
+export default defineConfig(async ({ isSsrBuild }) => {
+    console.log('--- IS SSR BUILD:', isSsrBuild);
 
+    // Load environment variables from dotenv or other config
     const dotEnvResult = loadEnvConfig(directoryName);
 
+    // Define environment variables for Vite
+    const envVariables = {
+        __ENV__: JSON.stringify(dotEnvResult?.parsed),
+        __SERVER__: true,
+        __CLIENT__: false,
+        ...Object.fromEntries(
+            Object.entries(config.buildConfig).map(([key, value]) => [
+                key,
+                typeof value === 'string' ? `"${value.replace(/\\/g, '\\\\')}"` : value,
+            ])
+        ),
+    };
+
+    // Define routes configuration
+    const routesConfig = async (defineRoutes) => {
+        // In production, perform required file copy operations
+        if (process.env.NODE_ENV === 'production') {
+            await performCopyOperations(config);
+        }
+
+        // Load metadata for routes
+        let metaJson = null;
+        try {
+            metaJson = await import('./app/sync-meta.json');
+        } catch {
+            console.warn('No sync-meta.json found, continuing without metadata.');
+        }
+
+        // Return routes definition
+        return defineRoutes((routeFn) =>
+            defineRoutesConfig(
+                routeFn,
+                {
+                    routesFileName: 'routes.json',
+                    packages: config.modules,
+                    paths: config.paths,
+                    iconsRepository: config?.iconsRepository,
+                    rootPath: resolve(directoryName, '../..'),
+                },
+                metaJson
+            )
+        );
+    };
+
+    // Vite configuration
     const viteConfig = {
-        define: {
-            __ENV__: JSON.stringify(dotEnvResult?.parsed),
-            ...Object.assign(
-                ...Object.entries(config.buildConfig).map(([k, v]) => ({
-                    [k]: typeof v !== 'string' ? v : `"${v.replace(/\\/g, '\\\\')}"`,
-                    __SERVER__: true,
-                    __CLIENT__: false,
-                }))
-            ),
-        },
+        define: envVariables,
         plugins: [
             i18nInternationalizationPlugin({
                 folderName: 'cdm-locales',
@@ -43,31 +81,14 @@ export default defineConfig(({ isSsrBuild }) => {
             }),
             remix({
                 appDirectory: 'src',
-                routes: async (defineRoutes) => {
-                    if (process.env.NODE_ENV === 'production') {
-                        await performCopyOperations(config);
-                    }
-                    const metaJson = await import('./app/sync-meta.json').catch(() => null);
-                    return defineRoutes((routeFn) => {
-                        defineRoutesConfig(
-                            routeFn,
-                            {
-                                routesFileName: 'routes.json',
-                                packages: config.modules,
-                                paths: config.paths,
-                                rootPath: resolve(directoryName, '../..'),
-                            },
-                            metaJson,
-                        );
-                    });
-                },
+                routes: routesConfig,
             }),
             tsconfigPaths({ ignoreConfigErrors: true }),
         ],
         resolve: {
             alias: {
-                '@app': resolve(__dirname, 'app'),
-                '@src': resolve(__dirname, 'src'),
+                '@app': resolve(directoryName, 'app'),
+                '@src': resolve(directoryName, 'src'),
             },
         },
     };

package/lib/generators/add-fullstack/files/Jenkinsfile

@@ -13,23 +13,23 @@ pipeline {
     string(name: 'CONNECTION_ID', defaultValue: 'test', description: 'connection id', trim: true)
     string(name: 'WORKSPACE_ID', defaultValue: 'fullstack-pro', description: 'workspace id', trim: true)
     string(name: 'UNIQUE_NAME', defaultValue: 'default', description: 'chart name', trim: true)
-    string(name: 'VERSION', defaultValue: 'v3', description: 'version of the deployment', trim: true)
+    string(name: 'VERSION', defaultValue: 'v1', description: 'version of the deployment', trim: true)
     string(name: 'HEMERA_LOG_LEVEL', defaultValue: 'info', description: 'log level for hemera')
     string(name: 'LOG_LEVEL', defaultValue: 'info', description: 'log level')
     string(name: 'DEPLOYMENT_PATH', defaultValue: '/servers', description: 'folder path to load helm charts')
-    string(name: 'PUBLISH_BRANCH', defaultValue: 'devpublish3', description: 'the publish branch for packages release')
+    string(name: 'PUBLISH_BRANCH', defaultValue: 'devpublish', description: 'the publish branch for packages release')
     string(name: 'EXCLUDE_SETTING_NAMESPACE_FILTER', defaultValue: 'brigade', description: 'exclude setting namespace that matches search string')
     string(name: 'GIT_CREDENTIAL_ID', defaultValue: 'fullstack-pro-github-deploy-key', description: 'jenkins credential id of git deploy secret')
     string(name: 'BUILD_MODULE_TO_INCLUDE', defaultValue: '@sample-stack*', description: 'build env')
     string(name: 'REPOSITORY_SSH_URL', defaultValue: 'git@github.com:CDEBase/fullstack-pro.git', description: 'ssh url of the git repository')
-    string(name: 'REPOSITORY_BRANCH', defaultValue: 'develop3', description: 'the branch with changes')
-    string(name: 'DEVELOP_BRANCH', defaultValue: 'develop3', description: 'the branch for the development')
+    string(name: 'REPOSITORY_BRANCH', defaultValue: 'develop', description: 'the branch with changes')
+    string(name: 'DEVELOP_BRANCH', defaultValue: 'develop', description: 'the branch for the development')
     string(name: 'MASTER_BRANCH', defaultValue: 'master', description: 'Master branch as default branch for production.')
 
     // by default first value of the choice will be choosen
     choice choices: ['auto', 'force'], description: 'Choose merge strategy', name: 'NPM_PUBLISH_STRATEGY'
     choice choices: ['yarn', 'npm'], description: 'Choose build strategy', name: 'BUILD_STRATEGY'
-    choice choices: ['0.7.9','0.7.7', '0.6.0'], description: 'Choose Idestack chart version', name: 'IDESTACK_CHART_VERSION'
+    choice choices: ['0.7.11','0.7.9', '0.6.0'], description: 'Choose Idestack chart version', name: 'IDESTACK_CHART_VERSION'
     choice choices: ['nodejs20', 'nodejs18', 'nodejs22'], description: 'Choose NodeJS version', name: 'NODEJS_TOOL_VERSION'    
     choice choices: ['buildOnly', 'buildAndTest', 'buildAndPublish',  'mobileBuild', 'mobilePreview', 'mobilePreviewLocal', 'mobilePreviewSubmit', 'mobileProd', 'mobileProdSubmit', 'devDeployOnly', 'stageDeploy', 'stageDeployOnly', 'prodDeploy', 'prodDeployOnly', 'allenv'], description: 'Where to deploy micro services?', name: 'ENV_CHOICE'
     choice choices: ['all', 'ios', 'android' ], description: 'Mobile type if it is mobile build?', name: 'MOBILE_CHOICE'
@@ -100,9 +100,9 @@ pipeline {
             rm .npmrc
             npx lerna exec --scope=*mobile-device ${params.BUILD_STRATEGY} ${env.BUILD_COMMAND}
             git checkout -- .npmrc
+            yarn git:pull
             yarn gitcommit
-            git pull origin ${params.REPOSITORY_BRANCH}
-            git push origin ${params.REPOSITORY_BRANCH}
+            yarn git:push
           """
         }
       }

package/lib/generators/add-fullstack/files/package.json

@@ -43,7 +43,7 @@
         "db:migrate": "knex migrate:latest --cwd . --knexfile ./servers/backend-server/knexfile.js",
         "db:migrate:rollback": "knex migrate:rollback  --cwd . --knexfile ./servers/backend-server/knexfile.js",
         "db:seed": "yarn db:migrate && knex seed:run  --cwd . --knexfile ./servers/backend-server/knexfile.js",
-        "predevpublish": "if ! git show-ref --verify --quiet refs/remotes/origin/$PUBLISH_BRANCH; then git checkout -b $PUBLISH_BRANCH && git push -u origin $PUBLISH_BRANCH; fi && git fetch origin $PUBLISH_BRANCH && git checkout $PUBLISH_BRANCH && git pull origin $PUBLISH_BRANCH && git merge -s recursive -X theirs $REPOSITORY_BRANCH -m \"merge from $REPOSITORY_BRANCH\" && yarn gitcommit && node tools/update-dependency-version.js && yarn gitcommit",
+        "predevpublish": "if ! git show-ref --verify --quiet refs/remotes/origin/$PUBLISH_BRANCH; then git checkout -b $PUBLISH_BRANCH && git push -u origin $PUBLISH_BRANCH; fi && git fetch origin $PUBLISH_BRANCH && git checkout $PUBLISH_BRANCH && git pull origin $PUBLISH_BRANCH && git merge -s recursive -X theirs $REPOSITORY_BRANCH -m \"merge from $REPOSITORY_BRANCH\" && yarn gitcommit && node tools/update-dependency-version.mjs && yarn gitcommit",
         "devpublish": "lerna publish prerelease --ignore-scripts --exact",
         "postdevpublish": "git checkout $REPOSITORY_BRANCH",
         "devpublish:auto": "yarn devpublish -- --yes",
@@ -60,10 +60,10 @@
         "husky-skip": "cross-env HUSKY_SKIP_HOOKS=1",
         "jest": "./node_modules/.bin/jest",
         "lerna": "lerna bootstrap",
-        "prelernapublish": "git checkout publish && git pull origin publish  && git merge -s recursive -X theirs master  -m 'merge from master' && yarn gitcommit && node tools/update-dependency-version.js && yarn gitcommit",
-        "lernapublish": "lerna publish --ignore-scripts --cd-version=patch && yarn update-lerna-on-develop",
-        "postlernapublish": "git checkout master",
-        "lint": "eslint --ext js --ext ts --ext md",
+        "prelernapublish": "git checkout publish && git pull origin publish  && git merge -s recursive -X theirs master  -m 'merge from master' && yarn gitcommit && node tools/update-dependency-version.mjs && yarn gitcommit",
+        "lernapublish": "lerna publish patch --ignore-scripts",
+        "postlernapublish": "yarn update-lerna-on-develop && git checkout master",
+        "lint": "eslint --ext js --ext ts --ext tsx --ext md",
         "lint:ci": "yarn lint . --format junit",
         "lint:fix": "yarn lint -- --fix",
         "lint:md": "markdownlint",
@@ -75,6 +75,7 @@
         "publish:force": "yarn publish:forceManual --yes",
         "publish:forceManual": "yarn lernapublish --force-publish=*",
         "publish:push": "yarn prelernapublish && git push origin publish && yarn postlernapublish",
+        "push-develop": "git push origin develop",
         "setBranchEnv": "cross-env REPOSITORY_BRANCH=${1:-$REPOSITORY_BRANCH} PUBLISH_BRANCH=${2:-$PUBLISH_BRANCH}",
         "sort-packages": "node tools/sortPackageJson.mjs && prettier --write package.json **/**/*/package.json **/*/package.json",
         "start": "cross-env NODE_ENV=development ENV_FILE=../../config/development/dev.env yarn startWeb",
@@ -88,7 +89,7 @@
         "pretravis": "yarn compile",
         "travis": "istanbul cover -x \"*.test.js\" _mocha -- --timeout 5000 --full-trace ./test/tests.js",
         "posttravis": "yarn lint",
-        "update-lerna-on-develop": "git checkout publish && git pull && cp lerna.json ../lerna-temp.json && git checkout develop && mv ../lerna-temp.json lerna.json && git commit -am 'Update lerna.json' && git push",
+        "update-lerna-on-develop": "git checkout publish && git pull origin publish && cp lerna.json ../lerna-temp.json && git checkout develop && mv ../lerna-temp.json lerna.json && git commit -am 'Update lerna.json' && yarn push-develop",
         "watch": "lerna exec --no-sort --ignore *server --ignore *device --ignore *browser-extension --stream --parallel -- webpack --watch",
         "watch-packages": "lerna exec --no-sort  --scope @sample-stack/platform* --scope @sample-stack/react-shared-components --scope @sample-stack/core --stream --parallel 'webpack --watch'",
         "zen:build": "cross-env NODE_ENV=production zen build",
@@ -145,8 +146,9 @@
         "@babel/preset-typescript": "^7.18.6",
         "@babel/register": "^7.18.9",
         "@babel/runtime": "^7.20.1",
-        "@common-stack/env-list-loader": "6.0.6-alpha.5",
-        "@common-stack/generate-plugin": "6.0.6-alpha.6",
+        "@common-stack/env-list-loader": "6.0.6-alpha.50",
+        "@common-stack/generate-plugin": "6.0.6-alpha.70",
+        "@common-stack/rollup-vite-utils": "6.0.6-alpha.70",
         "@emotion/babel-plugin": "^11.11.0",
         "@graphql-codegen/add": "^5.0.2",
         "@graphql-codegen/cli": "^5.0.2",
@@ -165,15 +167,16 @@
         "@redux-devtools/core": "^3.13.1",
         "@redux-devtools/dock-monitor": "^3.0.1",
         "@redux-devtools/log-monitor": "^4.0.1",
-        "@remix-run/dev": "^2.9.2",
-        "@remix-run/react": "^2.9.2",
+        "@rollup/plugin-alias": "^5.1.0",
+        "@rollup/plugin-babel": "^6.0.4",
         "@rollup/plugin-graphql": "2.0.2",
         "@rollup/plugin-image": "^3.0.1",
         "@rollup/plugin-json": "^6.1.0",
-        "@rollup/plugin-typescript": "^9.0.2",
+        "@rollup/plugin-node-resolve": "^15.2.3",
+        "@rollup/plugin-typescript": "^11.1.5",
         "@shelf/jest-mongodb": "^4.1.3",
         "@svgr/webpack": "^6.5.1",
-        "@testing-library/react": "^16.4.0",
+        "@testing-library/react": "^16.0.1",
         "@testing-library/react-hooks": "^8.0.1",
         "@types/async": "^3.2.15",
         "@types/body-parser": "1.19.2",
@@ -192,7 +195,6 @@
         "@types/react": "^18.2.20",
         "@types/react-dom": "^18.2.7",
         "@types/react-helmet": "^6.1.5",
-        "@types/react-redux": "^7.1.24",
         "@types/react-test-renderer": "^18.0.0",
         "@types/redux-logger": "^3.0.9",
         "@types/semver": "^7.3.13",
@@ -204,6 +206,7 @@
         "@typescript-eslint/parser": "^6.7.4",
         "@web/rollup-plugin-copy": "^0.5.1",
         "@webpack-cli/serve": "^1.7.0",
+        "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
         "autoprefixer": "^10.4.13",
         "babel-core": "^7.0.0-bridge.0",
         "babel-eslint": "^10.1.0",
@@ -256,6 +259,7 @@
         "html-webpack-plugin": "^5.5.0",
         "http-proxy-middleware": "^2.0.6",
         "husky": "^9.1.5",
+        "glob": "^11.0.0",
         "ignore-loader": "^0.1.2",
         "ip": "^1.1.8",
         "isomorphic-style-loader": "^5.3.2",
@@ -265,6 +269,7 @@
         "jest-dom": "^4.0.0",
         "jest-junit": "^14.0.1",
         "jest-matcher-utils": "^29.2.2",
+        "jest-raw-loader": "^1.0.1",
         "jest-transform-graphql": "^2.1.0",
         "jsdom": "^20.0.2",
         "lerna": "8",
@@ -325,7 +330,7 @@
         "ts-node": "^10.9.1",
         "tslib": "^2.4.1",
         "typedoc": "^0.23.20",
-        "typescript": "^5.1.6",
+        "typescript": "^5.5.4",
         "url-loader": "^4.1.1",
         "wait-on": "^6.0.1",
         "webpack": "^5.74.0",

package/lib/generators/add-fullstack/files/tools/html-plugin-template.ejs

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <base href="/">
+    <meta charset="utf-8">
+    <title>
+        <@= htmlWebpackPlugin.options.title @>
+    </title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+
+<body>
+    <div class="demo">
+        <div id="root">
+            Try building the demo:
+            <pre>
+        </pre> ...and refreshing this page!
+        </div>
+    </div>
+    <footer class="dark">
+        <section class="container copyright">
+            CDMBase LLC
+        </section>
+    </footer>
+</body>
+
+</html>