create-apexjs 0.1.6 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
# Copy to `.env` and fill in. These override the defaults in apex.config.ts.
|
|
2
|
+
# Private keys: APEX_<KEY>. Public keys (sent to the browser): APEX_PUBLIC_<KEY>.
|
|
3
|
+
|
|
4
|
+
# Private — server-only
|
|
5
|
+
APEX_API_SECRET=
|
|
6
|
+
|
|
7
|
+
# Public — readable in the browser
|
|
8
|
+
APEX_PUBLIC_APP_NAME={{name}}
|
|
9
|
+
APEX_PUBLIC_SITE_URL=http://localhost:3000
|
|
@@ -49,7 +49,31 @@ apex make api todos
|
|
|
49
49
|
apex make service Billing # → services/BillingService.ts (OO class)
|
|
50
50
|
apex make store cart
|
|
51
51
|
apex make layout marketing
|
|
52
|
-
apex make
|
|
52
|
+
apex make middleware auth # → middleware/auth.ts (runs on every request)
|
|
53
|
+
apex make test billing # → tests/billing.test.ts
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
## Styling
|
|
57
|
+
|
|
58
|
+
- **Scoped by default.** A `<style scoped>` block in an `.alpine` file is scoped to that component.
|
|
59
|
+
- **Global / shared styles.** Create `app.css` (also `styles/app.css` or `src/app.css`) in the
|
|
60
|
+
project root — Apex auto-loads and processes it (Vite HMR in dev, bundled in build).
|
|
61
|
+
- **Tailwind.** `npm i tailwindcss @tailwindcss/vite`, then `@import "tailwindcss";` at the top of
|
|
62
|
+
`app.css`. Apex auto-detects `@tailwindcss/vite` — no extra config.
|
|
63
|
+
|
|
64
|
+
## Config & environment
|
|
65
|
+
|
|
66
|
+
`apex.config.ts` declares `runtimeConfig` (see the file's comments). `public.*` values reach the
|
|
67
|
+
browser; everything else is server-only. Override any value from `.env` — `APEX_<KEY>` (private) /
|
|
68
|
+
`APEX_PUBLIC_<KEY>` (public). Read it via the loader/route `config` argument, `useRuntimeConfig()`,
|
|
69
|
+
or `env('KEY', fallback)`. Real environment variables always win — build once, deploy with env.
|
|
70
|
+
|
|
71
|
+
## Upgrading
|
|
72
|
+
|
|
73
|
+
Adopt new scaffold defaults in this app without touching your code:
|
|
74
|
+
|
|
75
|
+
```bash
|
|
76
|
+
apex upgrade # adds any new template files; never overwrites yours (package.json preserved)
|
|
53
77
|
```
|
|
54
78
|
|
|
55
79
|
Full docs: https://apexjs.site
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { defineConfig } from '@apex-stack/core'
|
|
2
|
+
|
|
3
|
+
// Runtime configuration — declare defaults here, override any value from the
|
|
4
|
+
// environment. Private keys map to APEX_<KEY>; public keys to APEX_PUBLIC_<KEY>
|
|
5
|
+
// (camelCase ↔ SCREAMING_SNAKE). Values in .env win over these defaults.
|
|
6
|
+
//
|
|
7
|
+
// Read it anywhere:
|
|
8
|
+
// • loaders/routes: ({ config }) => config.public.appName
|
|
9
|
+
// • components/composables (client): useRuntimeConfig().public.appName
|
|
10
|
+
// • raw escape hatch: env('SOME_KEY', 'fallback')
|
|
11
|
+
export default defineConfig({
|
|
12
|
+
runtimeConfig: {
|
|
13
|
+
// Private — server-only, never sent to the browser.
|
|
14
|
+
apiSecret: '', // ← APEX_API_SECRET
|
|
15
|
+
|
|
16
|
+
// Public — serialized into the page, readable in the browser.
|
|
17
|
+
public: {
|
|
18
|
+
appName: '{{name}}', // ← APEX_PUBLIC_APP_NAME
|
|
19
|
+
siteUrl: 'http://localhost:3000', // ← APEX_PUBLIC_SITE_URL
|
|
20
|
+
},
|
|
21
|
+
},
|
|
22
|
+
})
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
@import "tailwindcss";
|
|
2
|
+
@source './**/*.alpine';
|
|
3
|
+
|
|
4
|
+
/* apex-theme:start */
|
|
5
|
+
@custom-variant dark (&:where(.dark, .dark *));
|
|
6
|
+
|
|
7
|
+
@theme {
|
|
8
|
+
--font-body: "Instrument Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
|
|
9
|
+
"Segoe UI Emoji";
|
|
10
|
+
--font-title: "Montserrat", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
|
|
11
|
+
"Segoe UI Emoji";
|
|
12
|
+
--color-surface: #ffffff;
|
|
13
|
+
--color-surface-alt: #fafafa;
|
|
14
|
+
--color-on-surface: #525252;
|
|
15
|
+
--color-on-surface-strong: #171717;
|
|
16
|
+
--color-primary: #000000;
|
|
17
|
+
--color-on-primary: #f5f5f5;
|
|
18
|
+
--color-secondary: #262626;
|
|
19
|
+
--color-on-secondary: #ffffff;
|
|
20
|
+
--color-outline: #d4d4d4;
|
|
21
|
+
--color-outline-strong: #262626;
|
|
22
|
+
--color-surface-dark: #0a0a0a;
|
|
23
|
+
--color-surface-dark-alt: #171717;
|
|
24
|
+
--color-on-surface-dark: #d4d4d4;
|
|
25
|
+
--color-on-surface-dark-strong: #ffffff;
|
|
26
|
+
--color-primary-dark: #ffffff;
|
|
27
|
+
--color-on-primary-dark: #000000;
|
|
28
|
+
--color-secondary-dark: #d4d4d4;
|
|
29
|
+
--color-on-secondary-dark: #000000;
|
|
30
|
+
--color-outline-dark: #404040;
|
|
31
|
+
--color-outline-dark-strong: #d4d4d4;
|
|
32
|
+
--color-info: #0ea5e9;
|
|
33
|
+
--color-on-info: #ffffff;
|
|
34
|
+
--color-success: #22c55e;
|
|
35
|
+
--color-on-success: #ffffff;
|
|
36
|
+
--color-warning: #f59e0b;
|
|
37
|
+
--color-on-warning: #ffffff;
|
|
38
|
+
--color-danger: #ef4444;
|
|
39
|
+
--color-on-danger: #ffffff;
|
|
40
|
+
--radius-radius: 0.25rem;
|
|
41
|
+
}
|
|
42
|
+
/* apex-theme:end */
|