Building a multi-framework dashboard with Astro

• nanostores

  17 4,788 8.4 TypeScript

  A tiny (286 bytes) state manager for React/RN/Preact/Vue/Svelte with many atomic tree-shakable stores

  

All of these are valid ways of fixing the state management issue, but it's clear that we need to find a common solution that works for all the UI libraries. This is where nanostores comes into play! The description they provide on their GitHub page is simply perfect:

• react

  1 66 6.3 TypeScript

  React integration for Nano Stores, a tiny state manager with many atomic tree-shakable stores (by nanostores)

  

React (@nanostores/react): provides a useStore() Hook to get the store’s value and re-render the component on store’s changes

• SurveyJS

  surveyjs.io featured

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• vue

  1 45 6.8 JavaScript

  Vue integration for Nano Stores, a tiny state manager with many atomic tree-shakable stores (by nanostores)

  

Vue (@nanostores/vue): provides a useStore() composable function to get the store’s value and re-render the component on store’s changes

• astro-multi-framework-dashboard

  1 20 0.0 TypeScript

  Multi framework dashboard built with Astro

Multi-framework dashboard - GitHub Repository

• vite

  794 65,026 9.9 TypeScript

  Next generation frontend tooling. It's fast!

  

When dealing with npm dependencies in Astro, which is built on top of Vite, that are not previously compiled (converted into JavaScript), we have to specify Vite to the property ssr.noExternal in our Astro configuration, inside the vite attribute. If you want to read more about Externals, please refer to the official documentation.

• Tailwind CSS

  1,285 78,752 9.4 TypeScript

  A utility-first CSS framework for rapid UI development.

  

I also installed Tailwind CSS to create most of the layout for the page, with the prefix option of tw- (this is to prevent clashing classes between Tailwind and Vuetify).

• svelte-material-ui

  32 3,253 7.3 Svelte

  Svelte Material UI Components

As I mentioned at the beginning of this article, we’re using Svelte Material UI. To install it in our project, we have to first add it to our dependencies:

• InfluxDB

  www.influxdata.com featured

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

• recharts

  36 22,754 9.7 TypeScript

  Redefined chart library built with React and D3

  

This is the last integration of this article, and maybe the most fun! A dashboard cannot be considered complete unless we show a chart or diagram to visually display information. For this part of the demo, we’ll use mui for the components and recharts for the graphs.

• Material UI

  290 91,755 10.0 TypeScript

  Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.

  

React: MUI Core and recharts

• material-ui-docs

  122 311 10.0 TypeScript

  ⚠️ Please don't submit PRs here as they will be closed. To edit the docs or source code, please use the main repository:

  

This is the last integration of this article, and maybe the most fun! A dashboard cannot be considered complete unless we show a chart or diagram to visually display information. For this part of the demo, we’ll use mui for the components and recharts for the graphs.

• DummyJSON

  21 1,327 7.2 EJS

  DummyJSON.com provides different types of REST Endpoints filled with JSON data which you can use in developing the frontend with your favorite framework and library without worrying about writing a backend.

//src/pages/index.astro --- import Layout from '../layouts/Layout.astro'; import type { Product } from '../types'; import ProductTable from '../components/ProductTable.svelte'; import CategoryTags from '../components/CategoryTags.svelte'; import Overview from '../components/Overview.vue'; import CategoryChart from '../components/CategoryChart'; // fetch data const products: Product[] = await fetch('https://dummyjson.com/products') .then((res) => res.json()) .then((res) => res.products); --- + + + + + + + + +

• astro

  506 42,690 10.0 TypeScript

  The web framework for content-driven websites. ⭐️ Star to support our work!

  

> yarn astro add react vue svelte tailwind ✔ Resolving packages... Astro will run the following command: If you skip this step, you can always run it yourself later ╭─────────────────────────────────────────────────────────────────────────────────────────────────────╮ │ yarn add @astrojs/react @astrojs/svelte @astrojs/tailwind @astrojs/vue @types/react-dom@^18.0.6 │ │ @types/react@^18.0.21 react-dom@^18.0.0 react@^18.0.0 svelte@^3.46.4 tailwindcss@^3.0.24 │ │ vue@^3.2.30 │ ╰─────────────────────────────────────────────────────────────────────────────────────────────────────╯ ✔ Continue? … yes ✔ Installing dependencies... Astro will generate a minimal ./tailwind.config.cjs file. ✔ Continue? … yes Astro will make the following changes to your config file: ╭ astro.config.mjs ───────────────────────────────────────╮ │ import { defineConfig } from 'astro/config'; │ │ │ │ // https://astro.build/config │ │ import react from "@astrojs/react"; │ │ import vue from "@astrojs/vue"; │ │ import svelte from "@astrojs/svelte"; │ │ import tailwind from "@astrojs/tailwind"; │ │ │ │ // https://astro.build/config │ │ export default defineConfig({ │ │ integrations: [react(), vue(), svelte(), tailwind()] │ │ }); │ ╰─────────────────────────────────────────────────────────╯ ✔ Continue? … yes success Added the following integrations to your project: - @astrojs/react - @astrojs/vue - @astrojs/svelte - @astrojs/tailwind Astro will make the following changes to your tsconfig.json: ╭ tsconfig.json ──────────────────────────╮ │ { │ │ "extends": "astro/tsconfigs/strict", │ │ "compilerOptions": { │ │ "jsx": "react-jsx", │ │ "jsxImportSource": "react" │ │ } │ │ } │ ╰─────────────────────────────────────────╯ ✔ Continue? … yes success Successfully updated TypeScript settings

Suggest a related project