https://github.com/lourot/vike-react-styled-components-grommet

🔨 Vike + styled-components + grommet example
https://github.com/lourot/vike-react-styled-components-grommet

full-stack node react react-ssr server-rendering ssr static-site-generator styled-components vite vite-plugin vite-ssr vitejs web-framework

Last synced: 7 days ago
JSON representation

🔨 Vike + styled-components + grommet example

• Host: GitHub
• URL: https://github.com/lourot/vike-react-styled-components-grommet
• Owner: lourot
• License: mit
• Created: 2023-11-10T14:44:35.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-10-28T10:55:35.000Z (19 days ago)
• Last Synced: 2024-10-28T14:12:31.938Z (18 days ago)
• Topics: full-stack, node, react, react-ssr, server-rendering, ssr, static-site-generator, styled-components, vite, vite-plugin, vite-ssr, vitejs, web-framework
• Language: TypeScript
• Homepage: https://vike.dev
• Size: 328 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE.md

Awesome Lists containing this project

README

        
[](https://vike.dev)

# Vike + styled-components + grommet example

This is an example of integrating [Vike](https://vike.dev) with [styled-components](https://styled-components.com/)

and [grommet](https://v2.grommet.io/).

This was born out of the following discussions:

* https://github.com/vikejs/vike/issues/1217

* https://github.com/tdonhauser/vite-ssr-styled-components-grommet/pull/1

* https://github.com/grommet/grommet/issues/6976

Special thanks to [tdonhauser](https://github.com/tdonhauser) for initially digging into this.

Run it with:

```bash

pnpm install

pnpm run dev

```

Follow the initial commits in this repo one by one in order to understand how this is built:

* First, an empty [vike-react](https://github.com/vikejs/vike-react) project was scaffolded using

  [Bati](https://batijs.github.io/).

* Then, in order to be able to modify [onRenderHtml()](https://vike.dev/onRenderHtml), which is encapsulated in

  vike-react, we copied it in this repository. This process is called "ejecting" `onRenderHtml()`.

* We then added styled-components to the project, which required to extend `onRenderHtml()`.

* Finally added grommet.

As you can see, server-side rendering works: the initial HTML delivered by `onRenderHtml()` contains the styles of the

styled-components and grommet components and we don't experience any

[FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content).