Astro + Mafs Minimal Example

This is a minimal example of an Astro project that uses the Mafs library to render a beautiful mathematical visualization.

Steps Used to Create This Project

1. Make a new Astro project (npm create astro@latest). I used the minimal template and all of the default settings.

2. Add React via the React Astro integration (npx astro add react).

3. Add Mafs via the Mafs installation instructions (npm install --save mafs).

4. At this point, we're mostly there! I created a React component containing the Hello f(x) example at src/components/demo.jsx, imported this component into src/pages/index.astro, and rendered it (<HelloFx client:load />). (Don't forget the client directive!)

5. Key Step: Update astro.config.msj to contain the following:

import { defineConfig } from "astro/config";

import react from "@astrojs/react";

// https://astro.build/config
export default defineConfig({
  integrations: [react()],

  vite: {
    ssr: { noExternal: ["mafs"] },
  },
});

At this point, you should be able to npm run dev to start the development server and see your Mafs coordinate plane in action!

Happy visualizing! 🚀📈