DEV Community

Cover image for JungleJS + Storybook + TailwindCSS starter
Eka
Eka

Posted on • Updated on

JungleJS + Storybook + TailwindCSS starter

๐Ÿ“ท Cover image: Isaac Quesada

GitHub logo ekafyi / junglejs-storybook-tailwind

Starter site for JungleJS + Storybook + TailwindCSS

JungleJS + Storybook + TailwindCSS starter site

A starter site for:

  • JungleJS โ€” Svelte and GraphQL-based static site generator
  • Storybook โ€” UI development environment
  • TailwindCSS โ€” utility-first CSS framework

Read my introduction posts on DEV:

Branches

  • master โ€” JungleJS + Storybook + Tailwind CSS
  • with-async-data โ€” master + async data fetching example

Quick start

Deploy with Vercel Deploy with Netlify

Or create a new repo with Github template.

Install and develop

# Install the global Netlify CLI package if you havenโ€™t
npm install netlify-cli -g

# Clone and go to project directory
git clone https://github.com/ekafyi/junglejs-storybook-tailwind.git
cd junglejs-storybook-tailwind

# Install dependencies
npm install

# Start Jungle server
npm run start

# Start Storybook server
npm run storybook
Enter fullscreen mode Exit fullscreen mode

Jungle runs on localhost:3000.

Storybook runs on localhost:6006.

Directory structure

root
โ”œโ”€โ”€ .storybook # Storybook config
โ”œโ”€โ”€ src
โ”‚   โ”œโ”€โ”€ # ...
โ€ฆ
Enter fullscreen mode Exit fullscreen mode

JungleJS is a new static site generator. All Svelte goodness + GraphQL data layer = fast, performant static site. Jungleโ€™s underlying philosophy seems to resemble Eleventy, except Jungle uses Svelte.

But as of now, Jungle does not have live reload yet. We have to restart the server any time we make a change. While only partially addressing the needs for live reload, we can use Storybook for developing UI components. Even in project with hot reloading/live reload, itโ€™s useful to have an isolated UI development environment like Storybook, which also provides us with various addons, from accessibility to testing. Finally, Tailwind provides customizable, utility-first CSS, which helps us build our UI faster.

And thus this starter site was born.

For a quick start, you can click the โ€œUse this templateโ€ button on the Github repository or run git clone https://github.com/ekafyi/junglejs-storybook-tailwind.git.

Let me know if you're building anything with this!


Bonus track

Top comments (0)