@epicabdou/create-linkrjs-app 0.0.3 → 0.0.4
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/README.md +57 -18
- package/package.json +1 -1
- package/template/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
# create-linkrjs-app
|
|
1
|
+
# @epicabdou/create-linkrjs-app
|
|
2
2
|
|
|
3
|
-
Scaffold a new **linkr.js** app
|
|
3
|
+
Scaffold a new **linkr.js** app with Vite, React, React Router v7, file-based routing (**@epicabdou/linkr**), **Tailwind CSS v4**, and the **linkr-design-system**.
|
|
4
4
|
|
|
5
5
|
## Usage
|
|
6
6
|
|
|
@@ -11,26 +11,65 @@ pnpm install
|
|
|
11
11
|
pnpm dev
|
|
12
12
|
```
|
|
13
13
|
|
|
14
|
-
|
|
14
|
+
You can also use the shorthand name if the package is available:
|
|
15
15
|
|
|
16
|
-
|
|
16
|
+
```bash
|
|
17
|
+
npx create-linkrjs-app my-app
|
|
18
|
+
```
|
|
17
19
|
|
|
18
|
-
-
|
|
19
|
-
- React Router v7
|
|
20
|
-
- **@epicabdou/linkr** for file-based routes from `src/pages/`
|
|
21
|
-
- **Tailwind CSS v4** with **@tailwindcss/vite**
|
|
22
|
-
- **linkr-design-system** (design tokens + base styles via `@theme` and base layer)
|
|
23
|
-
- `index.tsx` (home) and `404.tsx` (not found)
|
|
20
|
+
Replace `my-app` with your desired project name. The CLI creates a folder with that name in the current directory.
|
|
24
21
|
|
|
25
|
-
Dev server runs at http://localhost:8000.
|
|
22
|
+
**Dev server:** runs at `http://localhost:8000` by default.
|
|
23
|
+
|
|
24
|
+
---
|
|
26
25
|
|
|
27
26
|
## What gets created
|
|
28
27
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
28
|
+
The template produces a minimal but complete Vite + React + TypeScript app with file-based routing and the design system.
|
|
29
|
+
|
|
30
|
+
### Root files
|
|
31
|
+
|
|
32
|
+
| File | Description |
|
|
33
|
+
|------|-------------|
|
|
34
|
+
| `package.json` | Project name set to your app name; includes `@epicabdou/linkr`, `linkr-design-system`, `react`, `react-router`, `tailwindcss`, `@tailwindcss/vite`, `vite`, etc. |
|
|
35
|
+
| `vite.config.ts` | React plugin + Tailwind v4 plugin (`@tailwindcss/vite`), dev server port **8000**. |
|
|
36
|
+
| `index.html` | Entry HTML with root div. |
|
|
37
|
+
| `tsconfig.json` | TypeScript config for the app. |
|
|
38
|
+
|
|
39
|
+
### Source structure
|
|
40
|
+
|
|
41
|
+
| Path | Description |
|
|
42
|
+
|------|-------------|
|
|
43
|
+
| `src/main.tsx` | Entry: imports CSS, builds routes with `createRoutes` + `import.meta.glob("./pages/**/*.tsx")`, creates React root and `RouterProvider`. |
|
|
44
|
+
| `src/index.css` | Tailwind + design system: `@import "tailwindcss"`, `@import "linkr-design-system/theme"`, `@import "linkr-design-system/base"`. |
|
|
45
|
+
| `src/pages/index.tsx` | Home page at `/` (sample content using design-system classes). |
|
|
46
|
+
| `src/pages/404.tsx` | Not-found page (catch-all route). |
|
|
47
|
+
| `src/config/protect.tsx` | Example `ProtectConfig` for route protection (optional use with `<Protect>`). |
|
|
48
|
+
| `src/vite-env.d.ts` | Vite client types. |
|
|
49
|
+
|
|
50
|
+
### Dependencies (template)
|
|
51
|
+
|
|
52
|
+
- **Runtime:** `@epicabdou/linkr`, `linkr-design-system`, `react`, `react-dom`, `react-router`
|
|
53
|
+
- **Dev:** `@tailwindcss/vite`, `tailwindcss`, `@vitejs/plugin-react`, `vite`, `typescript`, `@types/react`, `@types/react-dom`
|
|
54
|
+
|
|
55
|
+
---
|
|
56
|
+
|
|
57
|
+
## Next steps
|
|
58
|
+
|
|
59
|
+
1. **Add routes** — Create files under `src/pages/`:
|
|
60
|
+
- `about.tsx` → `/about`
|
|
61
|
+
- `blog/index.tsx` → `/blog`
|
|
62
|
+
- `blog/[id].tsx` → `/blog/:id`
|
|
63
|
+
- `docs/[...slug].tsx` → `/docs/*`
|
|
64
|
+
2. **Add layouts** — Either add `_layout.tsx` in a page folder, or use a separate `src/layouts/` folder with `layoutsGlob` and `layoutMap` in `main.tsx` (see [linkr README](../linkr/README.md#layouts-in-a-separate-folder)).
|
|
65
|
+
3. **Protect routes** — Use the `protect` export on a page/layout or wrap content with `<Protect>` and the config from `src/config/protect.tsx`.
|
|
66
|
+
4. **Styling** — Use Tailwind utilities and design-system tokens (e.g. `bg-primary-500`, `text-neutral-600`, `rounded-lg`, `font-sans`). See [design-system README](../design-system/README.md).
|
|
67
|
+
|
|
68
|
+
---
|
|
69
|
+
|
|
70
|
+
## Requirements
|
|
71
|
+
|
|
72
|
+
- **Node.js** 18+
|
|
73
|
+
- **pnpm** (recommended), npm, or yarn for installing dependencies
|
|
35
74
|
|
|
36
|
-
|
|
75
|
+
The generated app uses **Vite 5**, **React 18**, **React Router 7**, and **Tailwind CSS 4**.
|
package/package.json
CHANGED
package/template/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"name":"my-linkrjs-app","private":true,"version":"0.0.1","type":"module","scripts":{"dev":"vite","build":"tsc -b && vite build","preview":"vite preview"},"dependencies":{"@epicabdou/linkr":"^0.0.
|
|
1
|
+
{"name":"my-linkrjs-app","private":true,"version":"0.0.1","type":"module","scripts":{"dev":"vite","build":"tsc -b && vite build","preview":"vite preview"},"dependencies":{"@epicabdou/linkr":"^0.0.4","linkr-design-system":"^0.0.1","react":"^18.2.0","react-dom":"^18.2.0","react-router":"^7.0.0"},"devDependencies":{"@tailwindcss/vite":"^4.0.0","@types/react":"^18.2.0","@types/react-dom":"^18.2.0","@vitejs/plugin-react":"^4.2.0","tailwindcss":"^4.0.0","typescript":"^5.3.0","vite":"^5.0.0"}}
|