63 lines
1.5 KiB
Markdown
63 lines
1.5 KiB
Markdown
# Strapi + Vue demo site
|
|
|
|
A minimal headless CMS demo: **Strapi** serves content and auth; **Vue** is the public website.
|
|
|
|
## Prerequisites
|
|
|
|
- Node.js 20+
|
|
- PostgreSQL running with a `strapi` database (see `my-strapi-project/.env`)
|
|
|
|
## Quick start
|
|
|
|
### 1. Strapi backend
|
|
|
|
```bash
|
|
cd my-strapi-project
|
|
npm install
|
|
npm run develop
|
|
```
|
|
|
|
Admin panel: [http://localhost:1337/admin](http://localhost:1337/admin)
|
|
|
|
On first boot, the app automatically:
|
|
|
|
- Sets API permissions (public vs authenticated)
|
|
- Creates demo user: `demo@strapi-demo.local` / `Demo1234!`
|
|
- Seeds Global, About, Blog posts, and Member Area content
|
|
|
|
### 2. Vue frontend
|
|
|
|
In a second terminal:
|
|
|
|
```bash
|
|
cd vue-project
|
|
npm install
|
|
npm run dev
|
|
```
|
|
|
|
Site: [http://localhost:5173](http://localhost:5173)
|
|
|
|
## Pages
|
|
|
|
| Route | Content source | Access |
|
|
|-----------|-----------------------------|---------------|
|
|
| `/` | Global (hero, site name) | Public |
|
|
| `/about` | About single type | Public |
|
|
| `/blog` | Blog Post collection | Public |
|
|
| `/members`| Member Area single type | Login required|
|
|
| `/login` | Strapi Users & Permissions | — |
|
|
|
|
## Editing content
|
|
|
|
Use **Content Manager** in the Strapi admin to change copy, blog posts, or member-only text. Refresh the Vue site to see updates (no frontend rebuild).
|
|
|
|
## Production build
|
|
|
|
```bash
|
|
cd vue-project
|
|
npm run build
|
|
npm run preview
|
|
```
|
|
|
|
Set `VITE_STRAPI_URL` to your deployed Strapi URL when building the frontend.
|