DEV Community

Cover image for Use Storybook with Lando
Rachid
Rachid

Posted on

1 1

Use Storybook with Lando

If you're using Lando to manage your containers because you're that cool, I'll show you my way to make Storybook works painlessly with Lando.

First open your .lando.yml, and add the mandatory node service:

services:
  node:
    type: node
Enter fullscreen mode Exit fullscreen mode

Then, you're gonna need some tools to install Storybook and run it:

tooling:
  npm:
    service: node
  npx:
    service: node
Enter fullscreen mode Exit fullscreen mode

Now you can install Storybook. If you're using TailwindCSS and Laravel, you can follow my guide over here.

In order to provide access to it, you need to add a proxy to the port, like this:

proxy:
  node:
    - storybook.my-lando-app.lndo.site:6006
Enter fullscreen mode Exit fullscreen mode

Final file:

name: storynertia
recipe: laravel
config:
  webroot: app/public
  php: '8.1'
proxy:
  node:
    - storybook.storynertia.lndo.site:6006
services:
  node:
    type: node
tooling:
  npm:
    service: node
  npx:
    service: node
Enter fullscreen mode Exit fullscreen mode

Enjoy your containerized Storybook!

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (0)

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

⭐️🎀 JavaScript Visualized: Promises & Async/Await

async await

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay