Adex

An easier way to build full stack apps with Vite and Preact

Getting Started

Installation

  • You can use the create-adex cli
npm create adex@latest ./path/to/create/in

Manually

If you still wish to set it up manually.

  • Create a preact based vite app
npm create vite@latest -- -t preact
  • Add in the required deps
npm add -D adex
  • Modify config to use adex
// vite.config.js
import { defineConfig } from 'vite'
import preact from '@preact/preset-vite'
+ import { adex } from 'adex'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
+   adex(),
    preact()],
})
  • Remove the default preact files and add in basic structure for adex
rm -rf ./src/\* index.html
mkdir -p src/pages src/api
touch src/global.css

Folder Structure

After the setup, you should see this basic folder structure.

public # -> Public assets
src  # -> source files
--- pages
------ hello.js # -> Route binding for `/hello`
--- api
------ hello.js # -> Route binding for `/api/hello`
--- global.css # -> Global styles
vite.config.js # -> Vite config

Only pages and api in the src folder hold special functionality, everything else will be processed like another javascript/typescript file.

To understand more about it head over to Concepts ↓