@nuxtus/nuxtus 1.0.2 → 1.0.6

package/README.md

@@ -1,11 +1,19 @@
 # Nuxtus
 
-A website w/ CMS boilerplate using [Directus](https://directus.io) for backend CMS and [Nuxt](https://nuxtjs.org) (w/ Tailwind CSS) for frontend.
+A website w/ CMS boilerplate using [Directus](https://directus.io) for backend CMS and [Nuxt](https://nuxtjs.org) (w/ Tailwind CSS) for frontend that can also **automagically** create pages when you create Directus collections.
+
+
+https://user-images.githubusercontent.com/324026/175020548-57ee94b3-dee4-4b12-a8c8-6c0f1a94fab4.mov
+
 
 The purpose of this template is to be a quick-start for developing a website with Nuxt.js using Directus as the backend. The end result can be a static website or dynamically pull data from Directus depending on your preference.
 
 It also includes [nuxtus/cli]("https://github.com/nuxtus/cli") which provides a command line interface for quickly creating multiple index/detail pages from any Directus collections.
 
+https://user-images.githubusercontent.com/324026/175452950-46bd51a6-3fd9-441d-80fd-c6bbfaa01929.mp4
+
+## Features
+
 - [Directus](https://directus.io)
 - [Nuxt](https://nuxtjs.org)
   - [Tailwind CSS](https://tailwindcss.nuxtjs.org/)
@@ -18,24 +26,63 @@ It also includes [nuxtus/cli]("https://github.com/nuxtus/cli") which provides a
 
 ```bash
 $ npx create-nuxtus app-name
-$ cd app-name
 ```
 
 > Replace `app-name` with the name of your website or application.
 
-Your project will contain 2 folders server (Directus) and client (Nuxt). Run them as normal from within each folder:
+Nuxtus will automatically migrate the Directus DB if you are using SQLite. Otherwise follow the directions below to manually configure your database and get started.
+
+Your project will contain 2 folders server (Directus) and client (Nuxt).
+
+### Directus
+
+By default Nuxtus uses an SQLite database. If you wish to use an alternative database simply edit the `server/.env` file as suggested in the [Directus documentation](https://docs.directus.io/configuration/config-options/#database) then follow the steps below.
+
+```bash
+$ cd server
+
+# From within the root of the project
+$ npm run cli bootstrap
+```
+
+### Nuxt
+
+No set up for Nuxt is required.
+
+### Starting Nuxtus
+
+From inside your project folder:
 
 ```bash
-~/server $ npx directus start
-~/client $ npm run dev
+$ npm start
 ```
 
-### Creating pages
+### Automatically creating pages
+
+**Nuxtus automagically creates Nuxt pages as soon as you create a new Directus collection!**
+
+Nuxtus includes a POST endpoint located /api/directus/collection that will run in development. If you used `npx create-nuxtus` to create your Nuxtus project and selected "yes" to automatically creating pages from Directus then this is already configured in Directus for you.
+
+If not, create a new Flow in Directus as follows:
+
+#### Trigger
+
+Type: action
+Scope: items.create
+Collections: directus_collections
+
+#### Webhook / Request URL
+
+URL: http://localhost:3000/api/directus/collection
+Method: POST
+Request Body: `{{$last.payload}}`
+
+### Manually creating pages
 
 Nuxtus includes Nuxtus CLI which will automatically generate listing and view pages of any Directus collections. To use it:
 
 1. Log in to Directus ([http://0.0.0.0:8055/admin/login](http://0.0.0.0:8055/admin/login)) and [create a collection](https://docs.directus.io/configuration/data-model/#creating-a-collection)
-2. From the client folder `cd client` run `nuxtus create` and follow the prompts
+2. From the client folder (`cd client`) run `nuxtus create` and follow the prompts
 
 Pages will be created for each collection you select in `clients/pages`. These are a starting point for you to customise.
 
@@ -45,25 +92,11 @@ For more details on [Nuxtus CLI](https://github.com/nuxtus/cli) click [here](htt
 
 By default Directus is configured to accept CORS from any origin. Nuxtus suggests modifying this for your production deployment.
 
-## Manual setup
-
-Clone this repo onto your local machine, remove the remote git origin and add a new one.
+If you chose to install, remove the Nuxtus hook extension by deleting the folder `server/extensions/hooks/nuxtus-hook` from your project.
 
-### Server (Directus) Setup
-
-```bash
-$ cd server
-$ npm i
-$ npx directus start
-```
-
-### Client (Nuxt) Setup
+## Manual setup
 
-```bash
-$ cd client
-$ npm i
-$ npm run dev
-```
+Clone this repo onto your local machine, remove the remote git origin and add a new one. Then follow the [manual install instructions](#directus).
 
 > For further instructions visit `[http://localhost:3000](http://localhost:3000)`
 

package/TODO

@@ -1,4 +1,17 @@
 
 Todo:
   ☐ Handle fetch failures
+  ✔ Update docs.vue to use nuxtus-cli instead @done(22-06-12 20:57)
+  ✔ Fix code for singleton page in .vue template @done(22-06-13 19:06)
   ✔ Make a CLI for creating index/listing pages for Directus API @done(22-06-10 20:42)
+  ✔ Set up [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) @done(22-06-16 20:23)
+  ☐ Setup [semantic release](https://github.com/semantic-release/semantic-release)
+  ✔ Add interactive/pretty CLI for create-app.js @done(22-06-16 20:23)
+  ✔ Query database use (via interactive shell) in create-app.js @done(22-06-21 20:26)
+  ✔ Check node version for compatibility in create-app.js @done(22-06-16 22:07)
+  ☐ Look at https://renovatebot.com/
+  ☐ Documentation: https://docusaurus.io/ or https://vuepress.vuejs.org/
+  ✔ Create Directus flow via Directus API @done(22-07-04 17:46)
+  ☐ Add ability to automatically update .env for none SQLite databases
+  ☐ Can I HMR when adding new pages/routes?
+  ☐ Add all questions in create-app to start of process for better user flow

package/changelog.md

@@ -1,5 +1,31 @@
 # Nuxtus
 
+## 1.0.6
+
+- Add server api endpoint to be used as Directus webhook
+- Update to Directus 9.13.0
+- Update readme with details on using Collections hook
+
+## 1.0.5
+
+- Update nuxtus-cli to v1.0.3
+
+## 1.0.4
+
+- Hard delete the data.db file
+- Update @nuxtus-cli to 1.0.2
+- Update Nuxt to 3.0.0-rc.4
+- Add client, server and start npm scripts
+
+## 1.0.3
+
+- Add Directus CLI to package.json so `npm run cli` works
+- Update getting started instructions to include database migrations
+- Do not upload the sqlite database, create a new one
+- Add default user/password to Directus .env
+- Add @nuxtus/cli to dev dependencies
+- Update `pages/docs.vue` with details on using @nuxtus/cli
+
 ## 1.0.2
 
 - Separate create-nuxt command

package/client/.env

@@ -3,5 +3,5 @@ DIRECTUS_URL=http://localhost:8055
 # Nuxtus values
 # For now using email and password as nuxt-directus does not support token auth
 # NUXT_PUBLIC_DIRECTUS_TOKEN=UNSECURE_ACCESS_TOKEN
-NUXT_PUBLIC_DIRECTUS_EMAIL=admin@test.com
+NUXT_PUBLIC_DIRECTUS_EMAIL=admin@example.com
 NUXT_PUBLIC_DIRECTUS_PASSWORD=password

package/client/package.json

@@ -9,11 +9,13 @@
   "devDependencies": {
     "@nuxtjs/google-fonts": "^1.3.0",
     "@nuxtjs/tailwindcss": "^5.0.4",
-    "nuxt": "3.0.0-rc.1"
+    "@nuxtus/cli": "^1.0.5",
+    "@nuxtus/generator": "1.0.0",
+    "nuxt": "3.0.0-rc.4"
   },
   "dependencies": {
     "@headlessui/vue": "^1.6.1",
     "@heroicons/vue": "^1.0.6",
-    "nuxt-directus": "^2.0.1"
+    "nuxt-directus": "^2.1.0"
   }
 }

package/client/server/api/directus/collection.post.ts

@@ -0,0 +1,12 @@
+import { createPage } from "@nuxtus/generator"
+
+export default defineEventHandler(async (event) => {
+	if (process.env.NODE_ENV !== "production") {
+		const body = await useBody(event)
+		// TODO: Wrap in try/catch and return HTTP error if errors
+		createPage(body.collection, body.singleton)
+		return {
+			api: "ok",
+		}
+	}
+})

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@nuxtus/nuxtus",
 	"description": "Directus/Nuxt boilerplate with Tailwind CSS.",
-	"version": "1.0.2",
+	"version": "1.0.6",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/nuxtus/nuxtus.git"
@@ -22,5 +22,13 @@
 	"publishConfig": {
 		"access": "public",
 		"registry": "https://registry.npmjs.org/"
+	},
+	"scripts": {
+		"client": "cd client && npm run dev",
+		"server": "cd server && npx directus start",
+		"start": "concurrently \"npm run client\" \"npm run server\""
+	},
+	"devDependencies": {
+		"concurrently": "^7.2.2"
 	}
-}
+}

package/server/.env

@@ -64,3 +64,8 @@ EMAIL_FROM="no-reply@craigharman.com"
 EMAIL_TRANSPORT="sendmail"
 EMAIL_SENDMAIL_NEW_LINE="unix"
 EMAIL_SENDMAIL_PATH="/usr/sbin/sendmail"
+
+####################################################################################################
+## Default User
+ADMIN_EMAIL="admin@example.com"
+ADMIN_PASSWORD="password"

package/server/package.json

@@ -4,13 +4,14 @@
   "description": "",
   "main": "index.js",
   "scripts": {
+    "cli": "directus",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "directus": "^9.10.0",
+    "directus": "^9.13.0",
     "sqlite3": "^5.0.8"
   }
 }