Git Product home page Git Product logo

home-assistant-dashboard's Introduction

Build and Publish storybook to GitHub Pages

home-assistant-dashboard

Home Assistant Dashboard

Based on "Home Assistant Dashboard" at https://github.com/shannonhochkins/ha-dashboard

NOTE: The above repository has moved and can now be found as "ha-component-kit" at https://github.com/shannonhochkins/ha-component-kit and accompanying documentation at https://shannonhochkins.github.io/ha-component-kit/?path=/story/introduction-overview--default

Based on "Storybook for React tutorial" at https://storybook.js.org/tutorials/intro-to-storybook/react/en/get-started/

Based on "Problems and Solutions Upgrading to Storybook 7" at https://betterprogramming.pub/problems-and-solutions-upgrading-to-storybook-7-62c868b23af4

The documentation can be read at https://agility-game.github.io/home-assistant-dashboard/

Publish Storybook (inside docs directory) to Chromatic's secure CDN for the first time with the following command:

npx chromatic --project-token=chpt_98d934ebe677155

After a successful publication, our docs can now be seen at https://www.chromatic.com/setup?appId=6544ebbfe3db6d453bcf3c65

We can now run the publish script from within the docs directory or in CI with npm run chromatic or yarn chromatic.

โ„น Your project token was added to the script via the --project-token flag. If you're running Chromatic via continuous integration, we recommend setting the CHROMATIC_PROJECT_TOKEN environment variable in your CI environment. You can then remove the --project-token from your package.json script.

For a simple HTTP server to view a Storybook build locally, you can run:

$ cd docs
$ npx http-server storybook-static

Based on "Running GitHub Actions within Subdirectory" at https://tecadmin.net/running-github-actions-in-another-directory/

Based on "How to Use GitHub Actions for Building Projects within Sub-Directories" at https://copyprogramming.com/howto/github-actions-how-to-build-project-in-sub-directory

WE ARE HERE (inside docs folder): https://storybook.js.org/tutorials/intro-to-storybook/react/en/test/

WARNING: In our docs directory, where we are using StoryBook, one needs to upgrade yarn to at least version 3 to avoid build errors.

yarn upgrade

100 - Introduction

See README.md

200 - Requirements

See README.md

300 - Building Our Application

See README.md

400 - Conclusion

See README.md

home-assistant-dashboard's People

Contributors

wvanheemstra avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.