Building a multi-framework dashboard with Astro

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • InfluxDB - Access the most powerful time series database as a service
  • Sonar - Write Clean JavaScript Code. Always.
  • nanostores

    A tiny (334 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

    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

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • vue

    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

    Multi framework dashboard built with Astro

    Multi-framework dashboard - GitHub Repository

  • vite

    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

    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

    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

    Access the most powerful time series database as a service. Ingest, store, & analyze all types of time series data in a fully-managed, purpose-built database. Keep data forever with low-cost storage and superior data compression.

  • recharts

    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

    MUI Core: 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

    ⚠️ 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

    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

    Astro is the all-in-one web framework designed for speed 🏝️✨

    > 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/[email protected]^18.0.6 │ │ @types/[email protected]^18.0.21 [email protected]^18.0.0 [email protected]^18.0.0 [email protected]^3.46.4 [email protected]^3.0.24 │ │ [email protected]^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

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts