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:
- JungleJS + Storybook + TailwindCSS starter
- Get asynchronous data in JungleJS, the new Svelte JAMstack library
Branches
- master — JungleJS + Storybook + Tailwind CSS
- with-async-data — master + async data fetching example
Quick start
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
Jungle runs on localhost:3000.
Storybook runs on localhost:6006.
Directory structure
root
├── .storybook # Storybook config
├── src
│ ├── # ...…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)