🚀 abw-react-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-react-starter create my-app

Option 2: Install globally

npm install -g abw-react-starter

Then:

abw-react-starter create my-app

🚀 Usage

Create a new project

abw-react-starter create my-app

or simply:

abw-react-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 (backend + frontend)

☁️ Deployment

During setup, you will be asked:

• Whether to deploy to Heroku
• App names for backend and frontend
• Login (if not authenticated)

Or deploy later:

abw-react-starter publish my-app

🪣 AWS S3 Support

If enabled, the CLI will:

• Install S3 upload provider

• Configure:

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

• Ask for:

  • Bucket name
  • Region
  • Access keys

• Automatically configure Heroku env 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

| Setting | Value | | ----------------------- | ------------------- | | Block Public Access | ❌ Not fully blocked | | Object Ownership (ACLs) | ✔ Enabled | | Upload ACL | public-read |

🔐 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-react-starter

🐛 Troubleshooting

Heroku app name already taken

The CLI will automatically:

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

Not logged into Heroku

The CLI will prompt you to login 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