create-laju-app
v1.0.15
Published
A high-performance TypeScript web framework combining HyperExpress, Svelte 5, and Inertia.js for building modern full-stack applications. Features server-side rendering, real-time capabilities, and seamless client-server state management.
Downloads
1,078
Maintainers
Readme
Laju
A high-performance TypeScript web framework combining HyperExpress, Svelte 5, and Inertia.js for building modern full-stack applications. Features server-side rendering, real-time capabilities, and seamless client-server state management.
Visit laju.dev
Features
- Fast server-side rendering with HyperExpress
- Modern frontend with Svelte 5
- TypeScript support for better type safety
- Inertia.js integration for seamless client-server communication
- Built-in authentication system
- SQLite database with Knex query builder
- Email support with Nodemailer
- Google APIs integration
- Redis caching support
- Asset bundling with Vite
- TailwindCSS for styling
Prerequisites
- Node.js (Latest LTS version recommended)
- npm or yarn
- Redis server (optional, for caching)
Installation
Run the following command
npx create-laju-app project-name
Development
To start the development server:
npm run dev
This will:
- Start the Vite development server for frontend assets
- Run the backend server with nodemon for auto-reloading
Building for Production
To build the application for production:
npm run build
This command will:
- Clean the build directory
- Build frontend assets with Vite
- Compile TypeScript files
- Copy necessary files to the build directory
Project Structure
/app
- Core application files/middlewares
- Custom middleware functions/services
- Service layer implementations/controllers
- Application controllers
/resources
- Frontend resources/views
- Svelte components and views/js
- JavaScript assets and modules
/routes
- Route definitions/migrations
- Database migrations/public
- Static files/dist
- Compiled assets (generated)/build
- Production build output
Key Dependencies
Backend
- HyperExpress - High-performance web server
- Knex - SQL query builder
- SQLite3 - Database
- Nodemailer - Email sending
- Redis - Caching (optional)
Frontend
- Svelte 5 - UI framework
- Inertia.js - Client-server communication
- TailwindCSS - Utility-first CSS framework
- Vite - Build tool and dev server
Scripts
npm run dev
- Start development servernpm run build
- Build for production
Contributing
- Fork the repository
- Create your feature branch
- Commit your changes
- Push to the branch
- Create a new Pull Request
License
ISC License
Tutorial: Building Your First App
This tutorial will guide you through building a simple application using this framework.
1. Setting Up a New Route and Controller
First, let's create a new route and controller for a blog post feature.
- Create a new controller file
app/controllers/PostController.ts
:
import { Request, Response } from "../../type";
import DB from "../services/DB";
class Controller {
public async index(request: Request, response: Response) {
const posts = await DB.from("posts");
return response.inertia("posts/index", { posts });
}
public async create(request: Request, response: Response) {
return response.inertia("posts/create");
}
public async store(request: Request, response: Response) {
const { title, content } = request.body;
await DB.table("posts").insert({
title,
content,
created_at: Date.now(),
updated_at: Date.now()
});
return response.redirect("/posts");
}
}
export default new Controller();
- Add routes in
routes/web.ts
:
import PostController from "../app/controllers/PostController";
// Add these routes with your existing routes
Route.get("/posts", PostController.index);
Route.get("/posts/create", PostController.create);
Route.post("/posts", PostController.store);
2. Creating the Database Migration
Create a migration for the posts table:
npx knex migrate:make create_posts_table
In the generated migration file:
import { Knex } from "knex";
export async function up(knex: Knex): Promise<void> {
await knex.schema.createTable('posts', function (table) {
table.increments('id').primary();
table.string('title').notNullable();
table.text('content').notNullable();
table.bigInteger('created_at');
table.bigInteger('updated_at');
});
}
export async function down(knex: Knex): Promise<void> {
await knex.schema.dropTable('posts');
}
Run the migration:
npx knex migrate:latest
3. Creating Svelte Components
- Create
resources/views/posts/index.svelte
:
<script>
export let posts = [];
</script>
<div class="max-w-4xl mx-auto p-4">
<div class="flex justify-between items-center mb-6">
<h1 class="text-2xl font-bold">Blog Posts</h1>
<a
href="/posts/create"
class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
>
Create Post
</a>
</div>
<div class="space-y-4">
{#each posts as post}
<div class="border p-4 rounded">
<h2 class="text-xl font-semibold">{post.title}</h2>
<p class="mt-2 text-gray-600">{post.content}</p>
</div>
{/each}
</div>
</div>
- Create
resources/views/posts/create.svelte
:
<script>
import { router } from '@inertiajs/svelte';
let form = {
title: '',
content: ''
};
function handleSubmit() {
router.post('/posts', form);
}
</script>
<div class="max-w-4xl mx-auto p-4">
<h1 class="text-2xl font-bold mb-6">Create New Post</h1>
<form on:submit|preventDefault={handleSubmit} class="space-y-4">
<div>
<label class="block text-sm font-medium mb-1">Title</label>
<input
type="text"
bind:value={form.title}
class="w-full px-3 py-2 border rounded"
/>
</div>
<div>
<label class="block text-sm font-medium mb-1">Content</label>
<textarea
bind:value={form.content}
class="w-full px-3 py-2 border rounded h-32"
></textarea>
</div>
<div>
<button
type="submit"
class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
>
Create Post
</button>
</div>
</form>
</div>
4. Testing Your Application
- Start the development server:
npm run dev
- Visit
http://localhost:5555/posts
in your browser - Try creating a new post using the form
- View the list of posts on the index page
Key Concepts
- Routing: Routes are defined in
routes/web.ts
using the HyperExpress router - Controllers: Handle business logic and return Inertia responses
- Database: Use Knex.js for database operations and migrations
- Frontend: Svelte components with Inertia.js for seamless page transitions
- Styling: TailwindCSS for utility-first styling
Best Practices
File Organization
- Keep controllers in
app/controllers
- Place Svelte components in
resources/views
- Database migrations in
migrations
- Keep controllers in
Code Structure
- Use TypeScript types for better type safety
- Keep controllers focused on single responsibilities
- Use Inertia.js for state management between server and client
Database
- Always use migrations for database changes
- Use the Query Builder for complex queries
- Include timestamps for tracking record changes
Need help with anything specific? Feel free to ask!