create-ejsx-app

Create EJSX App

Create production-ready Hono & EJSX applications with zero configuration. Comes with built-in authentication, dashboard, and database setup.

Quick Start (with npm)

npx create-ejsx-app my-app
cd my-app
npm run dev

Quick Start (with bun)

bunx create-ejsx-app my-app
cd my-app
bun run dev

Visit http://localhost:3000 to see your app.

What's Included?

• ⚡️ Hono - Ultra-fast web framework
• 🎨 EJSX - EJS with component & layout support
• 🔒 Built-in authentication with JWT
• 💾 SQLite database setup
• 📊 Basic dashboard template
• 🎯 Production-ready middleware
• 🔥 Hot reload in development

Project Structure

my-app/
├── src/
│   ├── routes/
│   │   ├── api.js      # API routes (auth, user)
│   │   └── pages.js    # Page routes with EJSX templates
│   ├── middleware/
│   │   ├── auth.js     # JWT authentication
│   │   └── error.js    # Error handling
│   ├── db/
│   │   └── setup.js    # Database initialization
│   └── index.js        # App entry point
├── data/               # SQLite database file
├── .env               # Environment variables
├── .gitignore
└── package.json

Features

Authentication

• User registration and login
• JWT-based session management
• Secure password hashing with bcrypt
• Protected routes and API endpoints

Database

• SQLite setup with migrations
• User and session tables
• Easy-to-extend schema

UI Components

• Responsive layout system
• Navigation component
• Login/Register forms
• Dashboard template
• TailwindCSS for styling

Security

• CSRF protection
• Secure headers
• SQL injection prevention
• Password hashing
• JWT token management

Development

• Hot reload with nodemon
• Environment variable management
• Error handling middleware
• Logging system

Available Scripts

# Start development server with hot reload
npm run dev

# Start production server
npm start

# Run tests
npm test

# Run linter
npm run lint

Environment Variables

Create a .env file in your project root:

NODE_ENV=development
PORT=3000
JWT_SECRET=your-secret-key
DATABASE_URL=./data/app.db

API Routes

Authentication

# Register new user
POST /api/auth/register
{
  "email": "[e-mail]",
  "password": "password123",
  "name": "John Doe"
}

# Login
POST /api/auth/login
{
  "email": "[e-mail]",
  "password": "password123"
}

# Get user profile
GET /api/user
Authorization: Bearer <token>

Page Routes

• / - Home page
• /login - Login page
• /dashboard - Protected dashboard

Extending the App

Adding New Components

// src/routes/pages.js
ejsx.components.set('Button', ({ text, onClick, type = 'primary' }) => `
  <button 
    class="bg-${type}-500 px-4 py-2 rounded"
    onclick="${onClick}"
  >
    ${text}
  </button>
`);

Adding New API Routes

// src/routes/api.js
api.get('/custom-route', async (c) => {
  const userId = c.get('jwtPayload').sub;
  // Your logic here
  return c.json({ data: 'your data' });
});

Adding New Pages

// src/routes/pages.js
pages.get('/custom-page', async (c) => {
  const html = await ejsx.render(`
    <% slots.title = 'Custom Page' %>
    <% slots.content = \`
      <div>
        <h1>Custom Page</h1>
        <!-- Your content here -->
      </div>
    \` %>
    <%- renderLayout('main', slots) %>
  `, {});

  return c.html(html);
});

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT