Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit a6eb21b

Browse files
mxstbrLekoArts
mxstbr
and
LekoArts
authored
feat(gatsby): serve Admin from develop parent process (gatsbyjs#23734)
* 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]>
1 parent 9b077c6 commit a6eb21b

File tree

16 files changed

+1002
-115
lines changed

16 files changed

+1002
-115
lines changed

‎docs/blog/2020-05-29-gazette/index.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ In May we also announced our [series B round of funding round](/blog/2020-05-27-
1919

2020
Your content editors can now enjoy “instant preview” with Strapi and Gatsby Cloud! If you're new to Strapi, it’s a JavaScript-based, open source CMS. and a great pair for Gatsby projects. The Gatsby starter the Strapi team made for this project is gorgeous 😍 .
2121

22-
![Strapi blog screenshot](/strapi-blog.png)
22+
![Strapi blog screenshot](/strapi-blog.png)
2323

2424
Give Strapi a try with [this step-by-step tutorial](<(/blog/2020-05-12-strapi-instant-content-preview-plugin/)>).
2525

@@ -65,7 +65,7 @@ This month we made the Gatsby Typescript plugin part of core Gatsby, so you no l
6565

6666
In may we continued to improve our error messaging (see example [here](https://github.com/gatsbyjs/gatsby/pull/24186) and [here](https://github.com/gatsbyjs/gatsby/pull/23741)). But what about slow GraphQL queries? Well, Gatsby now supports performance tracing using the opentracing standard. You can to [enable tracing for GraphQL queries](/docs/performance-tracing/). This is useful because it allows you to debug why querying may be slow in your Gatsby project.
6767

68-
## 👩‍🚀 New in the Gatsby Community
68+
## 👩‍🚀 New in the Gatsby Community
6969

7070
### Gatsby Days is June 2 - 3
7171

@@ -103,7 +103,7 @@ Thank you **Akuoko Daniel Jnr** for helpful your article, ["Increasing Website P
103103

104104
And special thanks to our long time community member, **Horacio Herrera** for making a site to [teach Gatsby to Web Developers in Spanish](https://aprendegatsby.com/). We appreciate you!
105105

106-
## 🪐 New in the Gatsby Ecosystem
106+
## 🪐 New in the Gatsby Ecosystem
107107

108108
### Gatsby Themes & Plugins
109109

‎package.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,10 @@
8686
"unified": "^9.0.0",
8787
"yargs": "^10.1.2"
8888
},
89+
"resolutions": {
90+
"theme-ui": "0.4.0-alpha.3",
91+
"csstype": "2.6.10"
92+
},
8993
"engines": {
9094
"yarn": "^1.17.3",
9195
"node": ">=10.13.0"

‎packages/gatsby-admin/README.md

Lines changed: 29 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,36 @@
22

33
A visual interface to configure your Gatsby site.
44

5-
We have not packaged this nicely yet, so it is not installable.
5+
## Development
66

7-
## How to develop it
7+
The Admin app itself is a standard Gatsby site. It fetches its data from the Recipes GraphQL server, which exposes all the information we need about the Gatsby site.
88

9-
However, you can do some manual set up in order to work with it locally. Follow these steps:
9+
It uses [theme-ui](https://theme-ui.com) (with the [strict-ui](https://github.com/system-ui/theme-ui/pull/719) experiment) and [gatsby-interface](https://github.com/gatsby-inc/gatsby-interface) to style the app and [urql](https://github.com/FormidableLabs/urql) to fetch the data from the GraphQL server.
1010

11-
1. Navigate to the monorepo and open the `packages/gatsby-admin` directory.
12-
2. In that directory, run `yarn develop`.
13-
> If you see eslint errors you'll need to temporarily replace all references to `___loader` with `window.___loader` inside of `gatsby-link/index.js`.
14-
3. In a new tab, navigate to a Gatsby site of your choice (or create one) that runs the latest version of Gatsby (recipes are a requirement).
15-
4. From the `packages/gatsby-recipes/src` directory in the monorepo copy the `create-types.js` and `graphql.js` files. Use these files to replace those currently in your site's `node_modules/gatsby-recipes/src` directory.
16-
5. Run `node ./node_modules/gatsby-recipes/src/graphql.js` to start the Recipes GraphQL server for that site.
11+
### Running it locally
1712

18-
You should now be able to visit `localhost:8000` to see Gatsby Admin for that site!
13+
The easiest way to work on Admin locally is to develop Admin itself.
14+
15+
1. Make sure to have the dependencies installed by running `yarn` in the root folder
16+
2. Start the develop process for the Admin site by running `yarn workspace gatsby-admin run develop`
17+
18+
> If you see eslint errors you'll need to temporarily replace all references to `___loader` with `window.___loader` in `packages/gatsby-link/index.js`.
19+
20+
### Running it on a local site
21+
22+
To try Admin with one of your sites locally, use the `gatsby-dev-cli` to copy the local versions of `gatsby`, `gatsby-cli`, `gatsby-recipes`, `gatsby-core-utils` and `gatsby-admin` into your project:
23+
24+
```sh
25+
# Make sure to build the latest local versions of all packages
26+
~/gatsby
27+
yarn run watch
28+
29+
~/my-gatsby-site
30+
$ gatsby-dev --packages gatsby gatsby-cli gatsby-recipes gatsby-core-utils gatsby-admin
31+
32+
# In another tab, start your site with the Admin feature flag set
33+
~/my-gatsby-site
34+
$ GATSBY_EXPERIMENTAL_ENABLE_ADMIN=true gatsby develop
35+
```
36+
37+
Then visit `localhost:8000/\_\_\_admin` and you should see Gatsby Admin for your site!

‎packages/gatsby-admin/gatsby-browser.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
2-
import Providers from './src/components/providers'
2+
import Layout from './src/components/layout'
33

44
export const wrapPageElement = ({ element,props }) =>(
5-
<Providers {...props}>{element}</Providers>
5+
<Layout {...props}>{element}</Layout>
66
)

‎packages/gatsby-admin/gatsby-config.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
module.exports = {
2-
plugins: [`gatsby-plugin-typescript`]
2+
plugins: [],
3+
pathPrefix: `/___admin`
34
}

‎packages/gatsby-admin/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
// NOOP

‎packages/gatsby-admin/package.json

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,36 @@
44
"main": "index.js",
55
"author": "Max Stoiber",
66
"license": "MIT",
7-
"private": true,
7+
"repository": {
8+
"type": "git",
9+
"url": "https://github.com/gatsbyjs/gatsby.git",
10+
"directory": "packages/gatsby-admin"
11+
},
12+
"homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-admin#readme",
813
"dependencies": {
14+
"@emotion/core": "^10.0.28",
15+
"@emotion/styled": "^10.0.27",
916
"@typescript-eslint/eslint-plugin": "^2.28.0",
1017
"@typescript-eslint/parser": "^2.28.0",
18+
"csstype": "^2.6.10",
19+
"formik": "^2.1.4",
1120
"gatsby": "^2.22.12",
21+
"gatsby-interface": "0.0.163",
1222
"gatsby-plugin-typescript": "^2.4.3",
1323
"gatsby-source-graphql": "^2.5.2",
1424
"react": "^16.12.0",
1525
"react-dom": "^16.12.0",
26+
"react-icons": "^3.10.0",
1627
"subscriptions-transport-ws": "^0.9.16",
28+
"strict-ui": "^0.1.2",
29+
"theme-ui": "^0.4.0-alpha.3",
1730
"typescript": "^3.9.2",
18-
"urql": "^1.9.7"
31+
"urql": "^1.9.7",
32+
"yup": "^0.29.0"
1933
},
2034
"scripts": {
21-
"develop": "gatsby develop"
35+
"develop": "gatsby develop",
36+
"build": "gatsby build --prefix-paths",
37+
"watch": "nodemon --watch src --ext js,ts,tsx,json --exec \"yarn run build\""
2238
}
2339
}

‎packages/gatsby-admin/src/components/layout.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/** @jsx jsx */
2+
import { jsx, Flex } from "strict-ui"
3+
import Providers from "./providers"
4+
import Navbar from "./navbar"
5+
6+
const Layout: React.FC<{}> = ({ children }) => (
7+
<Providers>
8+
<Flex gap={0} flexDirection="column">
9+
<Navbar />
10+
{children}
11+
</Flex>
12+
</Providers>
13+
)
14+
15+
export default Layout

‎packages/gatsby-admin/src/components/navbar.tsx

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
/** @jsx jsx */
2+
import { jsx, Flex } from "strict-ui"
3+
import { Text, BaseAnchor } from "gatsby-interface"
4+
import { useQuery } from "urql"
5+
6+
const Navbar: React.FC<{}> = () => {
7+
const [{ data }] = useQuery({
8+
query: `
9+
{
10+
npmPackageJson(id: "name") {
11+
value
12+
}
13+
}
14+
`,
15+
})
16+
17+
return (
18+
<Flex
19+
justifyContent="space-between"
20+
alignItems="center"
21+
sx={{
22+
backgroundColor: `grey.90`,
23+
borderBottom: `default`,
24+
paddingX: 6,
25+
paddingY: 5,
26+
}}
27+
>
28+
<Flex gap={5} alignItems="center">
29+
<Text sx={{ color: `white` }}>Gatsby Admin</Text>
30+
{data && data.npmPackageJson && (
31+
<div
32+
sx={{
33+
width: `1px`,
34+
height: `16px`,
35+
backgroundColor: `grey.40`,
36+
}}
37+
/>
38+
)}
39+
{data && data.npmPackageJson && (
40+
<Text sx={{ color: `teal.50` }}>
41+
{data.npmPackageJson.value.replace(/^"|"$/g, ``)}
42+
</Text>
43+
)}
44+
</Flex>
45+
<Flex alignItems="center">
46+
<BaseAnchor
47+
href={`/`}
48+
target="_blank"
49+
sx={{ color: `whiteFade.60`, textDecoration: `none` }}
50+
>
51+
Visit site
52+
</BaseAnchor>
53+
</Flex>
54+
</Flex>
55+
)
56+
}
57+
58+
export default Navbar

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

Lines changed: 60 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,63 @@
11
import React from "react"
2-
import { Provider } from "urql"
3-
import client from "../urql-client"
2+
import { Provider, Client } from "urql"
3+
import { ThemeProvider, getTheme } from "gatsby-interface"
4+
import { ThemeProvider as StrictUIProvider } from "strict-ui"
5+
import { createUrqlClient } from "../urql-client"
46

5-
export default ({ children }): React.ReactElement => (
6-
<Provider value={client}>{children}</Provider>
7+
const baseTheme = getTheme()
8+
9+
const theme = {
10+
...baseTheme,
11+
colors: {
12+
...baseTheme.colors,
13+
background: baseTheme.colors.grey[90],
14+
},
15+
fontWeights: {
16+
...baseTheme.fontWeights,
17+
"500": 500,
18+
},
19+
borders: {
20+
default: `1px solid ${baseTheme.colors.whiteFade[20]}`,
21+
},
22+
sizes: {
23+
// NOTE(@mxstbr): Hacks around issues with strict-ui that I have to fix upstream eventually
24+
"1px": `1px`,
25+
"100%": `100%`,
26+
"16px": `16px`,
27+
initial: `initial`,
28+
},
29+
}
30+
31+
const GraphQLProvider: React.FC<{}> = ({ children }) => {
32+
const [status, setStatus] = React.useState(`loading`)
33+
const [client, setClient] = React.useState<Client | null>(null)
34+
35+
React.useEffect(() => {
36+
setStatus(`loading`)
37+
fetch(`/___services`)
38+
.then(res => res.json())
39+
.then(json => {
40+
setStatus(`idle`)
41+
if (json.recipesgraphqlserver) {
42+
setClient(createUrqlClient({ port: json.recipesgraphqlserver.port }))
43+
}
44+
})
45+
}, [])
46+
47+
if (status === `loading`) return <p>Loading...</p>
48+
49+
if (client === null)
50+
return <p>It looks like no develop process is running.</p>
51+
52+
return <Provider value={client}>{children}</Provider>
53+
}
54+
55+
const Providers: React.FC<{}> = ({ children }) => (
56+
<StrictUIProvider theme={theme}>
57+
<ThemeProvider theme={theme}>
58+
<GraphQLProvider>{children}</GraphQLProvider>
59+
</ThemeProvider>
60+
</StrictUIProvider>
761
)
62+
63+
export default Providers

0 commit comments

Comments
 (0)