Astro GUI
Manage your Astro project using graphical interface. Inspired by Vue CLI GUI.
Setup
-
Install
astro-gui
# Using npm npm i astro-gui # Using yarn yarn add astro-gui # Using pnpm pnpm add astro-gui
-
Add the integration to
integrations
property in yourastro.config.mjs
file// astro.config.mjs import astroGUI from 'astro-gui'; export default { // ... integrations: [astroGUI()], };
-
Add the following to your
astro.config.mjs
file// astro.config.mjs export default { // ... vite: { ssr: { external: ['preferred-pm', 'execa'], }, }, };
-
Parts of the dashboard UI is built using SolidJS
Install
solid
(Detailed instructions)# Using npm npx astro add solid # Using yarn yarn astro add solid # Using pnpm pnpx astro add solid
-
Parts of the dashboard UI also requires SSR
5.1. Install
node
adapter (Detailed instructions)# Using npm npm i @astrojs/node # Using yarn yarn add @astrojs/node # Using pnpm pnpx add @astrojs/node
5.2. Add the adapter to
adapter
property in yourastro.config.mjs
file// astro.config.mjs import nodejs from '@astrojs/node'; export default { // ... adapter: nodejs(), };
-
Currently you have to start the server using
--experimental-integrations
flag// package.json { // ... "scripts": { // ... "dev": "astro dev --experimental-integrations", "start": "astro dev --experimental-integrations", }, }
Configuration
packageManager
Your package manager for the project is automatically detect, but in case you need to change it
Supported values - 'npm'
| 'yarn'
| 'pnpm'
// astro.config.mjs
import astroGUI from 'astro-gui';
export default {
integrations: [astroGUI({
packageManager: 'yarn',
})],
};
Getting started
The dashboard UI is built using Astro itself. That means all the files making up the whole GUI are generated and copied directly in your project for you to freely modify.
Pages
Generated files
.
├── public
│ └── assets
│ └── astro-gui
│ ├── clipboard.svg
│ ├── deno.svg
│ ├── lit.svg
│ ├── netlify.svg
│ ├── node.svg
│ ├── partytown.svg
│ ├── preact.svg
│ ├── react.svg
│ ├── sitemap.svg
│ ├── solid.svg
│ ├── svelte.svg
│ ├── tailwind.svg
│ ├── terminal.svg
│ ├── turbolinks.svg
│ ├── vercel.svg
│ └── vue.svg
└── src
├── components
│ └── astro-gui
│ ├── AddButton.tsx
│ ├── CopyButton.tsx
│ └── ToastItem.tsx
├── data
│ └── astro-gui
│ └── integrations.ts
├── layouts
│ └── astro-gui
│ └── BaseLayout.astro
└── pages
└── astro-gui
└── integrations.astro
What comes after the hackathon
There are a lot of possibilities for which direction this project could go, what features could be supported. Sky really is the limit here. Some example that come to mind:
-
Pages
section for managing pages of the project -
API routes
section for managing API routes of the SSR project - Design System section with components
- Automatic code generator for boilerplate stuff (components, layouts, pages, API routes etc.)
- Project configuration, creation, updating, managing from within the GUI
- Lighthouse report integration (similar to what Netlify introduced)
- One-click deployments
- The GUI dashboard should be extensible and modifiable without too much opinions