From 3b59e1bec7a7b6358478da636b210c97f64cbc7d Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Mon, 7 Dec 2020 08:33:49 -0600 Subject: [PATCH] Migrate preview deployments from Netlify to Vercel (#9471) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This adds: * a script for building and deploying the Ember UI and Storybook to Vercel * configuration for that deployment * a header link to the UI to link to Storybook when built with STORYBOOK_LINK=true It also removes a file used to configure Netlify redirects. The Netlify setup had two “sites”: nomad-storybook and nomad-ui. I attempted to replicate that here but ran into some platform limitations with Vercel: two “projects” cannot share the same root directory without also sharing the same vercel.json that lets us specify configuration such as the rewrite needed to handle deep linking into the Ember UI. I tried having Storybook use /ui/storybook as the root directory (and adding a symbolically-linked package.json to bypass Vercel’s refusal to build without it) but that produced broken Storybook deployments. This instead combines the two projects into one (nomad-storybook-and-ui), defaults to forwarding / to /ui/, and adds the header link to the UI to navigate to Storybook. Rather than have a complex build script in the Vercel configuration UI, this delegates to a script in the repository. --- .netlify/ui-redirects | 2 -- ui/.vercel/build.sh | 6 ++++++ ui/README.md | 2 +- ui/app/components/global-header.js | 3 +++ ui/app/templates/components/global-header.hbs | 3 +++ ui/config/environment.js | 1 + ui/vercel.json | 12 ++++++++++++ 7 files changed, 26 insertions(+), 3 deletions(-) delete mode 100644 .netlify/ui-redirects create mode 100755 ui/.vercel/build.sh create mode 100644 ui/vercel.json diff --git a/.netlify/ui-redirects b/.netlify/ui-redirects deleted file mode 100644 index ea709efd3..000000000 --- a/.netlify/ui-redirects +++ /dev/null @@ -1,2 +0,0 @@ -/ /ui -/ui/* /ui/index.html 200 \ No newline at end of file diff --git a/ui/.vercel/build.sh b/ui/.vercel/build.sh new file mode 100755 index 000000000..82f9b3c13 --- /dev/null +++ b/ui/.vercel/build.sh @@ -0,0 +1,6 @@ +STORYBOOK_LINK=true ember build +mkdir -p ui-dist/ui +mv dist/* ui-dist/ui/ + +yarn build-storybook +mv storybook-static ui-dist/storybook/ diff --git a/ui/README.md b/ui/README.md index 8960b099e..04b861294 100644 --- a/ui/README.md +++ b/ui/README.md @@ -83,7 +83,7 @@ Nomad UI releases are in lockstep with Nomad releases and are integrated into th ### Storybook UI Library -The Storybook project provides a browser to see what components and patterns are present in the application and how to use them. You can run it locally with `yarn storybook` after you have `ember serve` running. The latest version from the `master` branch is at [`nomad-storybook.netlify.com`](https://nomad-storybook.netlify.com/). +The Storybook project provides a browser to see what components and patterns are present in the application and how to use them. You can run it locally with `yarn storybook` after you have `ember serve` running. The latest version from the `master` branch is at [`nomad-storybook-and-ui.vercel.app/storybook/`](https://nomad-storybook-and-ui.vercel.app/storybook/). To generate a new story for a component, run `ember generate story component-name`. You can use the existing stories as a guide. diff --git a/ui/app/components/global-header.js b/ui/app/components/global-header.js index a7fbc9d88..a1b13deb1 100644 --- a/ui/app/components/global-header.js +++ b/ui/app/components/global-header.js @@ -1,8 +1,11 @@ import Component from '@ember/component'; import classic from 'ember-classic-decorator'; +import { inject as service } from '@ember/service'; @classic export default class GlobalHeader extends Component { + @service config; + 'data-test-global-header' = true; onHamburgerClick() {} } diff --git a/ui/app/templates/components/global-header.hbs b/ui/app/templates/components/global-header.hbs index 5a6b50e4f..4beb56b39 100644 --- a/ui/app/templates/components/global-header.hbs +++ b/ui/app/templates/components/global-header.hbs @@ -11,6 +11,9 @@ {{/unless}}
+ {{#if this.config.APP.showStorybookLink}} + Storybook + {{/if}} Documentation ACL Tokens
diff --git a/ui/config/environment.js b/ui/config/environment.js index e459f2624..35f112b9b 100644 --- a/ui/config/environment.js +++ b/ui/config/environment.js @@ -29,6 +29,7 @@ module.exports = function(environment) { mirageWithNamespaces: false, mirageWithTokens: true, mirageWithRegions: true, + showStorybookLink: process.env.STORYBOOK_LINK === 'true', }, }; diff --git a/ui/vercel.json b/ui/vercel.json new file mode 100644 index 000000000..12421f686 --- /dev/null +++ b/ui/vercel.json @@ -0,0 +1,12 @@ +{ + "github": { + "silent": true + }, + "redirects": [ + { "source": "/", "destination": "/ui/" } + ], + "rewrites": [ + { "source": "/ui/(.*)", "destination": "/ui/index.html" } + ], + "trailingSlash": true +}