Deploy with Now, inline CSS #221

shawnbot · 2018-08-21T17:45:57Z

This PR builds on #218 with a couple of changes that make it deployable to Now:

The build npm script is now called dist (which makes sense, since it builds the dist directory).
There is a now.json that configures the project for static deployment out of the docs directory.
I've moved all of the Primer CSS "rendering" into our HTML template, eliminating all of the unpkg.com URLs! 🎉

…to fewer-scrollbars

shawnbot · 2018-08-21T21:16:48Z

FYI, I originally thought that moving all of the Primer CSS styles into our Styles doc component would work, but that breaks some assumptions about stylesheet application order because Emotion puts all of its generated CSS into the <head>.

Apparently—TIL!—styles in <body> get applied after those in <head>, so background-color rules generated by Emotion would be applied before the Primer CSS rules, even when the class names are in the right order (Primer CSS first, then Emotion) and the selectors have the same precedence. 🙃

shawnbot · 2018-08-21T21:25:14Z

Also, I ran a Lighthouse audit in Chrome Devtools on this to compare with primer.github.io/primer-react. The live site scores 61 on performance, but this one scores 80. 💥


Before
After

jonrohan · 2018-08-22T15:13:58Z

I was hoping this would mean we wouldn't need to check in the /docs/ folder which would reduce the amount of merge conflicts. Any chance this would work for that?

shawnbot · 2018-08-22T16:35:43Z

@jonrohan I think this gets at least one step closer to that goal. I tried getting this to just run x0 in the deployment container, but there were some issues with ports and HTTPS upgrading, so I switched back to a static deployment.

I think Now just runs npm run build to prepare the container, then npm start in deployment. So if we're interested in continuing to build our docs with x0, we could probably make that work by:

Rename build:docs to just build.
Set up npm start to run serve (which Next.js uses for its static deployments) in production.

I'm totally happy to give this a stab (maybe in a separate PR?), but I'd like to time-box it. @emplums, what do you think?

shawnbot · 2018-08-22T20:09:07Z

.babelrc

@@ -5,6 +5,7 @@
  ],
  "plugins": [
    "add-react-displayname",
-    "transform-object-rest-spread"
+    "transform-object-rest-spread",
+    "preval"


We use this babel plugin to inline the CSS.

shawnbot · 2018-08-22T20:12:37Z

examples/doc-components/SideNav.js

-)
+        {examples.map(example => (
+          <NavLink
+            className="menu-item no-underline link-gray-dark"


Note: only menu-item comes from primer-navigation. The other classes here come from primer-utilities.

shawnbot · 2018-08-22T20:13:45Z

examples/doc-components/Styles.js

 }

-export default Styles
+export default withDefaultTheme(Styles)


Note: This allows the theme to override the base styles, so long as you either wrap <Styles /> in a ThemeProvider or pass theme={theme} directly.

shawnbot · 2018-08-22T20:15:43Z

package.json

    "build:docs": "x0 build examples --out-dir docs",
    "lint": "eslint src examples",
-    "prepublishOnly": "npm run build",
-    "start": "x0 dev examples -op 8888",
+    "start": "x0 dev examples -op ${PORT:-8888}",


This was an attempt to get the PORT env variable set by Now working with x0. The problem I ran into once I got that working was that x0's HTTP server doesn't seem to like upgrading from HTTP to HTTPS. ☹️

shawnbot · 2018-08-22T20:18:15Z

package.json

+    "dist": "NODE_ENV=production rollup -c && npm run build:css",
+    "predist": "rm -rf dist",
+    "prepublishOnly": "npm run dist",
+    "build:css": "primer-module-build --outputDir dist/css src/primer-react.scss",


We can use primer-module-build without any additional configuration to compile our custom CSS bundle. This generates dist/css/build.css and dist/css/index.js.

emplums

Looks good to me!

shawnbot added 30 commits August 16, 2018 23:14

set top, zIndex default props on Sticky

43b03e6

make top nav sticky, simplify App

9be4fcd

just export the component page

15724d5

add pl={3} to examples top nav

7338865

refactor SideNav to take basename, etc.

853fa75

add examples/doc-components/index; kill GitHubAvatar

e03897b

add custom Library component to replace kit's

839c2f6

use new Library, add landing route for Demos

1b23930

use new Library, add landing route for Components

dc758b3

lint

de145fd

clean up doc-components imports

a01d902

tidy up Flex examples

d31377f

tidy demo code samples

eebf010

tidy up Library and example listings

89ece36

simplify SideNav

ffc9755

add widths to Library columns

7df0063

shrink SideNav box

c130602

set examples top nav z-index to 100

86a619d

reorganize demos

c2e07c2

sort Library examples alphabetically

2496f80

factor out redundant example constant names

9ab97b4

add home page link, dry up top nav

5ba47ae

massage whitespace around content area

05c803b

linkt

8a714b9

[skip ci] build docs

1319771

[skip ci] skip ci plz

d92297c

[skip ci] update bundle

216325c

[skip ci] Merge remote-tracking branch 'origin/release-2.0.0-beta' in…

a6b8970

…to fewer-scrollbars

remove home page

634cfa4

remove home page link, octicon

64ebb46

shawnbot added 6 commits August 21, 2018 13:28

lint

048d26a

[skip ci] build docs

b899d03

move styles up to avoid FOUC

4b063e6

[skip ci] build docs

f3df934

move primer CSS back into <head>

d0e0fdf

[skip ci] build docs

92b37aa

lint

b8fff5e

shawnbot added the status: review needed label Aug 22, 2018

shawnbot added the ds-reviewed Removes this issue/PR from the first responder list. label Aug 22, 2018

shawnbot changed the base branch from fewer-scrollbars to release-2.0.1-beta August 22, 2018 20:07

shawnbot mentioned this pull request Aug 22, 2018

Update examples app layout #218

Closed

shawnbot commented Aug 22, 2018

View reviewed changes

This was referenced Aug 22, 2018

Deploy Node app to Now #226

Merged

Make Primer release without base #1

Closed

shawnbot merged commit ac80e4c into release-2.0.1-beta Aug 22, 2018

shawnbot removed ds-reviewed Removes this issue/PR from the first responder list. status: review needed labels Aug 22, 2018

shawnbot mentioned this pull request Aug 22, 2018

Migrate from GitHub Pages to Now #220

Closed

3 tasks

emplums reviewed Aug 23, 2018

View reviewed changes

shawnbot deleted the deploy-now branch August 23, 2018 03:41

snyk-bot mentioned this pull request Apr 12, 2022

[Snyk] Upgrade @primer/primitives from 4.1.0 to 4.8.1 jj-crypto/react#6

Open

Jingyi090 mentioned this pull request Nov 17, 2023

[Snyk] Upgrade @primer/behaviors from 1.3.5 to 1.4.0 Jingyi090/react#5

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Deploy with Now, inline CSS #221

Deploy with Now, inline CSS #221

shawnbot commented Aug 21, 2018 •

edited

shawnbot commented Aug 21, 2018 •

edited

shawnbot commented Aug 21, 2018

jonrohan commented Aug 22, 2018

shawnbot commented Aug 22, 2018

shawnbot Aug 22, 2018

shawnbot Aug 22, 2018

shawnbot Aug 22, 2018

shawnbot Aug 22, 2018

shawnbot Aug 22, 2018

emplums left a comment

Deploy with Now, inline CSS #221

Deploy with Now, inline CSS #221

Conversation

shawnbot commented Aug 21, 2018 • edited

shawnbot commented Aug 21, 2018 • edited

shawnbot commented Aug 21, 2018

jonrohan commented Aug 22, 2018

shawnbot commented Aug 22, 2018

shawnbot Aug 22, 2018

Choose a reason for hiding this comment

shawnbot Aug 22, 2018

Choose a reason for hiding this comment

shawnbot Aug 22, 2018

Choose a reason for hiding this comment

shawnbot Aug 22, 2018

Choose a reason for hiding this comment

shawnbot Aug 22, 2018

Choose a reason for hiding this comment

emplums left a comment

Choose a reason for hiding this comment

shawnbot commented Aug 21, 2018 •

edited

shawnbot commented Aug 21, 2018 •

edited