Feature/update workflows

.github/workflows/deploy-production.yml → .github/workflows/ci-and-auto-deploy.yml

@@ -1,11 +1,8 @@
-name: Deploy AWS production
+name: Continuous Integration
 env: 
   NODE_VERSION: '14.x'
-on:
-  push:
-    # Sequence of patterns matched against refs/tags
-    tags:
-      - 'v*' # Push events to matching v*, i.e. v1.0, v20.15.10
+  SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
+on: [push]
 
 
 jobs:
@@ -43,9 +40,35 @@ jobs:
       - run: npm ci
       - run: npm run typeCheck --if-present
 
-  deploy:
+  deploy-staging:
+    if: github.ref == 'refs/heads/main'
     needs: [lint, typeCheck, test]
-    name: Upload to Amazon S3
+    name: Upload to Amazon S3 Staging
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Configure AWS credentials
+        uses: aws-actions/configure-aws-credentials@v1
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: us-west-2
+      - name: Setup node
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{env.NODE_VERSION}}
+      - run: npm ci 
+      - run: npm run build:staging
+      - name: Copy files to staging bucket
+        run: aws s3 sync ./dist/ s3://staging.simularium.allencell.org --delete
+      - name: Clear cloudfront cache
+        run: aws cloudfront create-invalidation --distribution-id ${{ secrets.CFE_CLOUDFRONT_DISTRIBUTION_ID_STAGING }} --paths "/*"
+
+  deploy-production:
+    if: startsWith(github.ref, 'refs/tags/v')
+    needs: [lint, typeCheck, test]
+    name: Upload to Amazon S3 Production
     runs-on: ubuntu-latest
 
     steps:
@@ -71,5 +94,3 @@ jobs:
           status: ${{ job.status }}
           channel: '#simularium-dev'
         if: always()
-
-

.github/workflows/daily-new-viewer.yml

@@ -3,9 +3,11 @@ name: github pages
 on:
   schedule:
     - cron: "0 0 * * *"
+  workflow_dispatch:
+
 
 jobs:
-  deploy:
+  build:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
@@ -16,7 +18,6 @@ jobs:
           node-version: "14.x"
 
       - name: Cache dependencies
-
         uses: actions/cache@v1
         with:
           path: ~/.npm
@@ -26,18 +27,25 @@ jobs:
 
       - run: npm ci
       - run: npm i @aics/simularium-viewer@latest
-      - run: npm run gh-build
-      - name: Prepare tag
-        id: prepare_tag
-        if: startsWith(github.ref, 'refs/tags/')
-        run: |
-          TAG_NAME="${GITHUB_REF##refs/tags/}"
-          echo "::set-output name=tag_name::${TAG_NAME}"
-          echo "::set-output name=deploy_tag_name::deploy-${TAG_NAME}"
+      - run: npm run gh-build:stable
+      - run: npm i https://github.com/simularium/simularium-viewer
+      - run: npm run gh-build:dev
+      - name: Upload
+        uses: actions/upload-artifact@v3
+        with:
+          name: daily-build
+          path: gh-pages/
+
+  download-and-deploy:
+    runs-on: ubuntu-latest
+    needs: [build]
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/download-artifact@v3
+      - name: Display structure of downloaded files
+        run: ls -R
       - name: Deploy
         uses: peaceiris/actions-gh-pages@v3
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./dist
-          tag_name: ${{ steps.prepare_tag.outputs.deploy_tag_name }}
-          tag_message: 'Deployment to gh-pages to test new viewer ${{ steps.prepare_tag.outputs.tag_name }}'
+          publish_dir: ./daily-build

.gitignore

@@ -9,4 +9,6 @@ build/
 .settings/
 .env
 .vscode/
-coverage/
+coverage/
+dev
+stable

CONTRIBUTING.md

@@ -62,6 +62,10 @@ ___
 #### Update Simularium Viewer module
 Run `npm update` to update dependencies, including simularium-viewer
 
+### Daily builds
+[Viewer at development head](https://simularium.github.io/simularium-website/dev)
+[Latest released stable viewer](https://simularium.github.io/simularium-website/stable)
+
 #### Staging deployment
 Automatically builds from `main`
 

gh-pages/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Daily Builds with Updated Viewers</title>
+</head>
+<body>
+    <ul>
+        <li>
+            <a href="dev">App with viewer at development head</a>
+        </li>
+        <li>
+            <a href="stable">App with latest released stable viewer</a>
+        </li>
+    </ul>
+</body>
+</html>

package.json

@@ -12,6 +12,8 @@
     "scripts": {
         "start": "webpack-dev-server --config ./webpack/webpack.config.js --env.env dev",
         "gh-build": "GH_BUILD=true webpack --config ./webpack/webpack.config.js --env.env production",
+        "gh-build:stable": "GH_BUILD=true webpack --config ./webpack/webpack.config.js --env.env production --env.dest gh-pages/stable",
+        "gh-build:dev": "GH_BUILD=true webpack --config ./webpack/webpack.config.js --env.env production --env.dest gh-pages/dev",
         "pregh-deploy": "npm run gh-build",
         "gh-deploy": "gh-pages -d dist",
         "build:staging": "NODE_ENV=staging webpack --config ./webpack/webpack.config.js  --env.env staging",

webpack/plugins.js

@@ -11,27 +11,32 @@ const webpack = require('webpack');
 
 const Env = require('./constants').Env;
 
-const BASE_PLUGINS = [
-    new ForkTsCheckerWebpackPlugin({
-        tsconfig: path.resolve(__dirname, '../', 'tsconfig.json'),
-        workers: ForkTsCheckerWebpackPlugin.TWO_CPUS_FREE,
-    }),
-    new CleanWebpackPlugin(['dist'], {
-        root: path.resolve(__dirname, '../'),
-        watch: true,
-    }),
-    new MiniCssExtractPlugin({ filename: 'style.[contenthash].css' }),
-    new HtmlWebpackPlugin({
-        favicon: './src/assets/AICS-logo.svg',
-        template: path.resolve(__dirname, 'index.template.html')
-    }),
-    new webpack.EnvironmentPlugin({
-        GH_BUILD: !!process.env.GH_BUILD,
-        GOOGLE_API_KEY: process.env.GOOGLE_API_KEY || "AIzaSyAZ3ow-AhfTcOsBml7e3oXZ7JwqIATcGwU"
-    }),
-];
+const getBasePlugins = (dist) => {
+    return [new ForkTsCheckerWebpackPlugin({
+            tsconfig: path.resolve(__dirname, '../', 'tsconfig.json'),
+            workers: ForkTsCheckerWebpackPlugin.TWO_CPUS_FREE,
+        }),
+        new CleanWebpackPlugin([dist], {
+            root: path.resolve(__dirname, '../'),
+            watch: true,
+        }),
+        new MiniCssExtractPlugin({
+            filename: 'style.[contenthash].css'
+        }),
+        new HtmlWebpackPlugin({
+            favicon: './src/assets/AICS-logo.svg',
+            template: path.resolve(__dirname, 'index.template.html')
+        }),
+        new webpack.EnvironmentPlugin({
+            GH_BUILD: !!process.env.GH_BUILD,
+            GOOGLE_API_KEY: process.env.GOOGLE_API_KEY || "AIzaSyAZ3ow-AhfTcOsBml7e3oXZ7JwqIATcGwU"
+        }),
+    ]
+}
 
-const BUNDLE_ANALYZER = [new BundleAnalyzerPlugin({ analyzerMode: 'static' })];
+const BUNDLE_ANALYZER = [new BundleAnalyzerPlugin({
+    analyzerMode: 'static'
+})];
 
 const PLUGINS_BY_ENV = {
     [Env.PRODUCTION]: [
@@ -57,8 +62,8 @@ const PLUGINS_BY_ENV = {
     ]
 };
 
-module.exports = (env, analyzer) => [
-    ...BASE_PLUGINS,
+module.exports = (env, dist, analyzer ) => [
+    ...getBasePlugins(dist),
     ...(analyzer ? BUNDLE_ANALYZER : []),
     ...(PLUGINS_BY_ENV[env] || [])
-];
+];

webpack/webpack.config.js

@@ -10,10 +10,10 @@ const themeVariables = lessToJs(
 const { devServer, Env, stats } = require("./constants");
 const getPluginsByEnv = require("./plugins");
 
-module.exports = ({ analyze, env } = {}) => ({
+module.exports = ({ analyze, env, dest="dist" } = {}) => ({
     devtool: env !== Env.PRODUCTION && "source-map",
     devServer: {
-        contentBase: path.join(__dirname, "../", "dist"),
+        contentBase: path.join(__dirname, "../", dest),
         disableHostCheck: true,
         host: devServer.host,
         port: devServer.port,
@@ -139,11 +139,11 @@ module.exports = ({ analyze, env } = {}) => ({
         },
     },
     output: {
-        path: path.resolve(__dirname, "../", "dist"),
+        path: path.resolve(__dirname, "../", dest),
         filename: "[name].[chunkhash].js",
         publicPath: process.env.GH_BUILD ? "" : "/",
     },
-    plugins: getPluginsByEnv(env, analyze),
+    plugins: getPluginsByEnv(env, dest, analyze),
     resolve: {
         extensions: [".ts", ".tsx", ".js", ".jsx", ".json"],
     },