Serve Gatsby Admin from develop parent process #23734

mxstbr · 2020-05-04T11:50:59Z

Based on #22759 and #23733, this serves the Gatsby Admin site at /___admin from the develop parent process proxy.

The gatsby-admin package is setup as a standard Gatsby site, which is built and then the proxy serves the static files whenever a /___admin route is requested.

This also sets up Gatsby Admin with gatsby-interface and strict-ui to build the UI, which closes #24451.

For marketing reasons, this is guarded behind a "secret" GATSBY_EXPERIMENTAL_ENABLE_ADMIN env variable for now (cc @hashimwarren for visibility).

packages/gatsby-core-utils/src/service-lock.ts

…t in admin

LekoArts

Added some comments :)

packages/gatsby-admin/README.md

packages/gatsby-admin/gatsby-config.js

LekoArts · 2020-05-27T13:59:58Z

packages/gatsby-admin/src/components/providers.tsx

+    default: `1px solid ${baseTheme.colors.whiteFade[20]}`,
+  },
+  sizes: {
+    // NOTE(@mxstbr): Hacks around issues with strict-ui that I have to fix upstream eventually


I know that you're personally a fan of strict-ui. How different is it from Theme UI?

Because we use Theme UI everywhere else and other people should also be able to contribute. So on first sight it might make more sense to use Theme UI? (And you wouldn't have to deal with bugs from its early stage).

I fear that not using Theme UI here this will converge overtime to a state where it then would need to be refactored as Theme UI gets new features and strict-ui not.

It's the same thing 😉 strict-ui is literally theme-ui, but it throws an error if you try to use a non-theme value.

You can drop down to theme-ui in any file, which I've actually done in some, by simply doing /** @jsx jsx */ import { jsx } from 'theme-ui'. Completely interoperable!

I don't think it's fair to say they are the same, since Theme UI works more as a superset of CSS and strict-mode is inherently a subset of that API, which means some things would not work as expected for people coming from using Theme UI -- that said, I don't think this should block the initial release, but we should be considering what the "SDK" for Admin will look like and how easy it is for others to work on Admin

My answer of "they are the same thing" was that strict-ui literally uses theme-ui under the hood to alleviate the mentioned concern that theme-ui will get new features but strict-ui will not, which cannot be the case. Sorry for not being clear!

To clarify, a pseudo-implementation of strict-ui would look like this:

// strict-ui/jsx.js const jsx = (type, props, ...children) => { makeSureTheresNoCrapCSS(props.sx) return themeUiJSX(type, props, ...children) }

What I mean was that it is literally the theme-ui API, with some extra restrictions applied. That means switching to theme-ui is as simple as replacing all strict-ui imports with theme-ui, minus the <Flex> component which is the only addition on top of theme-ui it adds 😊

i think the most questions arising, because the npm package readme is empty and there is no github repo associated :/

jxnblk

Overall, looks good to me! Decoupling this as a separate Gatsby app makes a ton of sense to me.

I do have some concerns about mixing Gatsby Interface with strict-ui -- especially because it doesn't appear to be in a stable place (yet) and lacks some of the documentation and general know-how that Gatsby Interface or Theme UI have. I don't think that should block the initial release, but if there are things that aren't covered in Gatsby Interface or Theme UI that you think we'll need in Admin, we should work towards getting those features into these component libraries

jxnblk · 2020-05-27T14:37:20Z

packages/gatsby-admin/src/pages/index.tsx

-      <h1>{data.npmPackageJson.value.replace(/^"|"$/g, ``)}</h1>
-      <h2>Plugins</h2>
-      <ul>
+    <Flex gap={7} flexDirection="column" sx={{ paddingY: 7, paddingX: 6 }}>


Curious why you decided to use Theme UI in addition to Gatsby Interface – seems like this might be confusing for other people coming in to work on this...

I'm not sure I follow, those two packages solve completely different problems? One is our design system component library, one is a CSS-in-JS library? 🤔

I don't think they solve completely different problems, ideally a design system should provide virtually all of the styles we'd need to build out UI IMO. Curious to hear what @Elanhant's thoughts might be though (this is definitely not-blocking BTW)

To be honest, I am not completely sure what is the question here 🙂

My understanding, which could very well be wrong, was that Gatsby Interface was a design system/component library that could build out most of the UI without needing other libraries. If that's not the case, and it's intended to work alongside something like Theme UI, then that's all I'm asking about here

I think your understanding would be right for Gatsby Interface v1 (correct me if I'm wrong, @fk). For now, however, it is just a library of the components used the most in Cloud, so it is inevitable to have cases where you'll have to resort to a 3rd party or custom solution (in which case, let me and/or Flo know, perhaps it warrants an addition to Gatsby Interface!).

packages/gatsby-admin/src/pages/index.tsx

jxnblk · 2020-05-27T14:44:07Z

packages/gatsby/src/utils/develop-proxy.ts

+
+const serveAdmin = st({
+  path: adminFolder,
+  url: `/___admin`,


This might be a limitation of the st package, but I do like that the /___graphql path is pattern-based and forgiving for typos. Have you taken that into consideration already?

Have not taken that into consideration, good call! From a quick glance, it does not look like the st package supports this. I tried some other packages and they didn't quite work, so I'd rather ship this for now and fix that later?

packages/gatsby-admin/README.md

Co-authored-by: Lennart <[email protected]>

mxstbr · 2020-05-30T10:13:55Z

Going to ship this for Gatsby Days next week!

* Server static admin app from parent process * Start Recipes GraphQL server when running develop and fetch fresh port in admin * Setup gatsby-inteface and strict-ui * Build gatsby admin navbar * Proper headings on the dash * Style rest of dashboard * Add return type to createUrqlClient * Update gatsby admin running instructions * Add instructions to replace ___loader with window.___loader * Remove unused components * Bump strict-ui and test local site dev * Add GATSBY_EXPERIMENTAL_ENABLE_ADMIN feature flag * Resolve type issue by pinning version of csstype to 2.6.10 * Fix package.json for gatsby-admin package * Update packages/gatsby-admin/README.md Co-authored-by: Lennart <[email protected]> * Remove built-in plugin * Add some more technical docs * Fix prettier Co-authored-by: Lennart <[email protected]>

gatsbot bot added the status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer label May 4, 2020

mxstbr changed the title ~~Server Gatsby Admin from develop parent process~~ Serve Gatsby Admin from develop parent process May 4, 2020

mxstbr mentioned this pull request May 4, 2020

Add gatsby-plugin-admin #23368

Closed

LekoArts removed the status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer label May 5, 2020

mxstbr added the topic: admin label May 6, 2020

mxstbr force-pushed the idempotent-recipes-server branch from f925e65 to be319ea Compare May 7, 2020 10:58

muescha reviewed May 18, 2020

View reviewed changes

packages/gatsby-core-utils/src/service-lock.ts Outdated Show resolved Hide resolved

mxstbr force-pushed the idempotent-recipes-server branch from be319ea to 35a7fea Compare May 20, 2020 05:53

mxstbr force-pushed the serve-admin-from-parent-process branch from 3064853 to ac0d414 Compare May 20, 2020 11:25

mxstbr mentioned this pull request May 20, 2020

Start Recipes GraphQL server during gatsby develop #23733

Merged

mxstbr force-pushed the serve-admin-from-parent-process branch 2 times, most recently from 083ab63 to 3f03dd6 Compare May 21, 2020 09:43

Base automatically changed from idempotent-recipes-server to master May 22, 2020 06:39

mxstbr added 6 commits May 25, 2020 08:41

Server static admin app from parent process

3ffaf6b

Start Recipes GraphQL server when running develop and fetch fresh por…

ae32af3

…t in admin

Setup gatsby-inteface and strict-ui

03f706c

Build gatsby admin navbar

3f78375

Proper headings on the dash

f289aa5

Style rest of dashboard

8c31132

mxstbr force-pushed the serve-admin-from-parent-process branch from 8eee572 to 8c31132 Compare May 25, 2020 06:46

mxstbr added 5 commits May 25, 2020 10:30

Add return type to createUrqlClient

177ea37

Update gatsby admin running instructions

8f7c0c5

Add instructions to replace ___loader with window.___loader

16980d7

Remove unused components

7aeaff0

Bump strict-ui and test local site dev

4ccab11

mxstbr marked this pull request as ready for review May 25, 2020 09:14

mxstbr requested review from a team as code owners May 25, 2020 09:14

mxstbr added 2 commits May 25, 2020 11:18

Add GATSBY_EXPERIMENTAL_ENABLE_ADMIN feature flag

5a26ca6

Resolve type issue by pinning version of csstype to 2.6.10

019c317

Fix package.json for gatsby-admin package

789f8df

mxstbr mentioned this pull request May 26, 2020

Prompt to restart develop process from Admin #24474

Closed

mxstbr self-assigned this May 26, 2020

LekoArts suggested changes May 27, 2020

View reviewed changes

jxnblk previously approved these changes May 27, 2020

View reviewed changes

muescha reviewed May 27, 2020

View reviewed changes

packages/gatsby-admin/README.md Show resolved Hide resolved

Update packages/gatsby-admin/README.md

289ea39

Co-authored-by: Lennart <[email protected]>

mxstbr dismissed jxnblk’s stale review via 289ea39 May 28, 2020 05:26

mxstbr added 2 commits May 28, 2020 08:05

Remove built-in plugin

cf4cb7a

Merge branch 'master' into serve-admin-from-parent-process

2cea391

mxstbr mentioned this pull request May 29, 2020

Gatsby Admin UI cleanup #24610

Merged

Merge branch 'master' into serve-admin-from-parent-process

ea9703d

mxstbr added the bot: merge on green Gatsbot will merge these PRs automatically when all tests passes label May 30, 2020

mxstbr added 2 commits May 30, 2020 11:31

Add some more technical docs

db1df98

Fix prettier

7336281

mxstbr requested a review from a team as a code owner May 30, 2020 09:35

mxstbr merged commit a6eb21b into master May 30, 2020

delete-merged-branch bot deleted the serve-admin-from-parent-process branch May 30, 2020 10:14

andrewaylett mentioned this pull request May 30, 2020

Gatsby 2.22.13 pulls in incompatible dependencies #24653

Closed

LekoArts mentioned this pull request Nov 24, 2021

chore: Remove obsolete resolutions #34067

Merged

oskari mentioned this pull request Mar 7, 2023

chore(gatsby): Remove obsolete st package #37726

Merged

Serve Gatsby Admin from develop parent process #23734

Serve Gatsby Admin from develop parent process #23734

Uh oh!

Conversation

mxstbr commented May 4, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

LekoArts left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mxstbr May 29, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jxnblk left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mxstbr commented May 30, 2020

Uh oh!

Uh oh!

mxstbr commented May 4, 2020 •

edited

Loading

mxstbr May 29, 2020 •

edited

Loading