Deploying a Blitz App

Blitz is a fullstack React framework built on Next.js, designed for rapid development of scalable, production-ready applications. It provides a “Zero-API” data layer, authentication, code scaffolding, and conventions that help you build robust apps quickly. Blitz is ideal for teams who want the power of a monolithic framework with the flexibility of React and the Next.js ecosystem.

This guide explains how to deploy a Blitz application to Klutch.sh, both with and without a Dockerfile. It also covers installation and provides sample code to get started.

Prerequisites

• Node.js 18+
• Git and GitHub account
• Klutch.sh account

---

Getting Started: Install Blitz

1. Create a new Blitz app:

   npm install -g blitz
   blitz new my-blitz-app
   cd my-blitz-app
   npm install

2. Start the development server:

   blitz dev

   Your app should be running at http://localhost:3000.

Sample Code (app/pages/index.tsx or app/pages/index.js)

Add a simple page to your Blitz project:

export default function Home() {
  return (
    <div>
      <h1>Hello from Blitz on Klutch.sh!</h1>
      <p>This is your starter page.</p>
    </div>
  );
}

---

Deploying Without a Dockerfile

1. Push your Blitz app to a GitHub repository.
2. Log in to Klutch.sh.
3. Create a new project and give it a name.
4. Create a new app:
   • Select your Blitz GitHub repository and branch
   • Set the port to route traffic (usually 3000 for Blitz)
   • Choose region, compute, number of instances, and add any environment variables
5. Add a start script in your package.json:

   "scripts": {
     "start": "blitz start"
   }

6. Make sure your server listens on the port provided by Klutch.sh via the PORT environment variable:

   const port = process.env.PORT || 3000;
   app.listen(port, () => {
     console.log(`Server running on port ${port}`);
   });

7. Click “Create” to deploy. Klutch.sh will build and deploy your app automatically.

---

Deploying With a Dockerfile

1. Add a Dockerfile to your project root. Example:

   # Use official Node.js image
   FROM node:18-alpine
   
   # Set working directory
   WORKDIR /app
   
   # Copy package files and install dependencies
   COPY package*.json ./
   RUN npm install --production
   
   # Copy app source
   COPY . .
   
   # Build Blitz app
   RUN blitz build
   
   # Expose port (match your Blitz app)
   EXPOSE 3000
   
   # Start the app
   CMD ["npm", "start"]

2. Push your code (with Dockerfile) to GitHub.
3. In Klutch.sh, follow the same steps to create a project and app, but select the Dockerfile option when prompted.
4. Set the service details and environment variables as needed.
5. Click “Create” to deploy. Klutch.sh will build your Docker image and deploy your app.

Note: Your Blitz app should always listen on the PORT environment variable as shown above.

---

Resources

• Klutch.sh Documentation
• Blitz Documentation

---

Deploying to Klutch.sh is simple and flexible. Choose the method that best fits your workflow and project requirements.