@elevennodes/wagtail-frontend NPM

Frontend setup for Wagtail/Django projects

A simple starter kit that integrates Parcel, Tailwind CSS, Alpine.js, and Axios into your Wagtail/Django project — ready to go with just one command.

🚀 Quick Start

Use this package to scaffold the frontend environment in any Django/Wagtail project:

npx @elevennodes/wagtail-frontend

This will:

Create a package.json
Setup a src/ directory containing:
- js/ for your JavaScript (with Alpine & Axios)
- css/ for your Tailwind styles
Configure build targets (Wagtail) with Parcel
Ask for your main app name to automatically update all paths

⚙️ Setup Steps

1. Paths in `package.json` will be automatically updated

During installation, you'll be prompted to enter your main app name. The paths in package.json will be automatically configured based on your input. For example:

"targets": {
  "main": {
    "source": "src/js/index.js",
    "distDir": "app_name/static/js",
    "publicUrl": "/static/js/"
  },
  "styles": {
    "source": "src/css/style.css",
    "distDir": "app_name/static/css",
    "publicUrl": "/static/css/"
  },
  "images": {
    "distDir": "app_name/static/images",
    "publicUrl": "/static/images/"
  },
  "fonts": {
    "distDir": "app_name/static/fonts",
    "publicUrl": "/static/fonts/"
  }
}

This replace app_name with the actual name of your Wagtail app where static files live.

2. Install dependencies

yarn install

3. Run the dev server

This will watch your files and auto-rebuild on save:

yarn dev

4. Build for production

yarn build

🧩 Included by Default

⚡ Parcel – blazing fast bundler
🎨 Tailwind CSS
🧠 Alpine.js – reactive JS framework
🔌 Axios – promise-based HTTP client

🤝 Designed For

This is designed for modern Wagtail or Django projects that want to:

Avoid Webpack complexity
Use modern frontend tooling
Keep everything neatly integrated in one repo

You can freely extend this package with any additional libraries that your project requires. Simply install them using your preferred package manager (npm or yarn) and they will be automatically included in your build.