🚀 abw-strapi-next-starter

CLI to quickly bootstrap a fullstack project with:

• ⚙️ Strapi (Backend)
• ⚡ Next.js (Frontend)
• ☁️ Heroku deployment (optional)
• 🪣 AWS S3 upload support (optional)

📦 Installation

Option 1: Use without installing (recommended)

npx abw-strapi-next-starter create my-app

Option 2: Install globally

npm install -g abw-strapi-next-starter

Then:

abw-strapi-next-starter create my-app

🚀 Usage

Create a new project

abw-strapi-next-starter create my-app

or simply:

abw-strapi-next-starter my-app

⚙️ What it does

• Creates a full project structure:

  • /backend → Strapi (TypeScript)
  • /frontend → Next.js

• Initializes Git repositories

• Configures environment variables

• Optionally sets up:

  • AWS S3 uploads
  • Heroku deployment

☁️ Deployment

During setup, you will be asked:

• Whether to deploy to Heroku
• Whether to use pipelines
• App names for backend and frontend
• Login confirmation for the Heroku account in use

Or deploy later:

abw-strapi-next-starter publish my-app

🚀 Heroku Deployment Modes

The CLI supports two Heroku deployment modes:

1. Simple deploy

Creates:

• 1 backend app
• 1 frontend app

Example:

my-app-api
my-app-web

Use this mode if you want a straightforward Heroku deploy without staging and production separation.

2. Pipelines deploy

Creates:

• 2 backend apps
  • my-app-api-stage
  • my-app-api-prod
• 2 frontend apps
  • my-app-web-stage
  • my-app-web-prod
• 2 pipelines
  • backend pipeline
  • frontend pipeline

Use this mode if you want staging + production environments.

🔁 Environment mapping (pipelines mode)

| Environment | Backend | Frontend uses | | ----------- | -------------- | --------------- | | Staging | API Stage | API Stage | | Production | API Production | API Production |

🔄 Deploy flow

When you choose Heroku deploy, the CLI will ask:

Do you want to use pipelines (staging + production)?

If you answer No

The CLI will:

1. Create 1 backend app
2. Create 1 frontend app
3. Configure environment variables
4. Deploy both apps

If you answer Yes

The CLI will:

1. Create 4 Heroku apps
2. Create 2 pipelines
3. Attach apps to staging and production
4. Configure environment variables
5. Deploy to both environments

📦 Naming defaults

Simple mode

my-app-api
my-app-web

Pipelines mode

my-app-api-stage
my-app-api-prod
my-app-web-stage
my-app-web-prod

🪣 AWS S3 Support

If enabled, the CLI will:

• Install the S3 upload provider

• Configure:

  • plugins.ts
  • middlewares.ts
  • server.ts

• Ask for:

  • Bucket name
  • Region
  • Access key
  • Secret

• Automatically configure Heroku environment variables

⚠️ S3 Bucket Configuration (IMPORTANT)

For image uploads to work correctly, your S3 bucket must allow public read access.

1. Block Public Access

Go to:

S3 → Your Bucket → Permissions → Block public access

Configure:

• ❌ Do NOT block all public access
• ✔ Allow public access (at least partially)

If everything is blocked, images will not load in the browser.

2. Object Ownership (ACLs)

Go to:

S3 → Your Bucket → Permissions → Object Ownership

Set:

• ✔ ACLs enabled

This is required because Strapi uploads files using:

ACL: 'public-read'

🔓 What this means

• Uploaded images will be publicly accessible via URL:

https://your-bucket.s3.region.amazonaws.com/image.jpg

• Only your backend (using AWS credentials) can:

  • upload
  • delete
  • modify files

🔐 Is this secure?

Yes — this is standard practice for most web apps.

As long as you:

• ❌ do NOT expose your AWS credentials
• ✔ use restricted IAM permissions

your setup is safe.

🚀 Advanced (optional)

For more advanced setups, you can later switch to:

• CloudFront (CDN)
• Private buckets + signed URLs
• Bucket policies instead of ACLs

🧠 Summary

| Feature | Supported | | ---------------------- | --------- | | Simple Heroku deploy | ✔ Yes | | Pipelines deploy | ✔ Yes | | AWS S3 uploads | ✔ Yes | | Local-only setup | ✔ Yes |

🔐 Requirements

Make sure you have installed:

• Node.js (>= 18)
• npm
• Git
• Heroku CLI

🧪 Local Development

Backend

cd backend
npm run develop

Frontend

cd frontend
npm run dev

📁 Project Structure

my-app/
├── backend/
├── frontend/
└── .abw-starter.json

🔄 Updating

If installed globally:

npm update -g abw-strapi-next-starter

🐛 Troubleshooting

Heroku app name already taken

The CLI will automatically:

1. Try your chosen name
2. Try a random suffix
3. Fall back to a Heroku-generated name

Wrong Heroku account selected

Before deployment, the CLI shows the current Heroku account and asks whether you want to continue with it.

Not logged into Heroku

The CLI will prompt you to log in automatically.

Images not loading (S3)

Check:

• Bucket is not fully blocking public access
• ACLs are enabled
• Correct bucket name and region

📄 License

MIT

👨‍💻 Author

Built with ❤️ by ABWorks