Laman.js is a modern web framework designed to simplify the creation of dynamic, high-performance websites. In a world where web development can often be complex, Laman.js offers a solution that prioritizes simplicity without sacrificing advanced features. With Edge.js as its intuitive templating engine and Vite as its fast development tool, Laman.js allows developers to focus on building content and functionality, rather than dealing with complex configurations. This makes it an ideal choice for anyone looking to build fast, responsive, and easily manageable websites.
Before you start with Laman.js, ensure you have the following prerequisites in place to ensure a smooth installation and development process:
Initialize a New Project First, you need to create a new project with Laman.js. Open your terminal and run the following command to get started:
npm init lamanjs my-webThis command will create a new folder named my-web and set up a basic Laman.js project structure inside it.
Navigate to Project Directory After initializing the project, navigate to the project directory using:
cd my-webHere, you will find the folder and files created for your project.
Install Dependencies Next, you need to install all necessary dependencies for your project. Run the following command:
npm installThis command will download and install all required packages listed in your project's package.json file.
Start Development Server With dependencies installed, it’s time to start the development server. Run:
npm run devThis command will start the development server, and you can see live changes in your browser thanks to Vite's Hot Module Replacement feature.
Project Structure After initializing the project, your project structure inside the my-web folder will look like this:
my-web
├───public
├───src
│ └───pages
│ └───index.edge
└───package.json
Laman.js allows you to integrate dynamic data into your website with Server-Side Rendering (SSR) support. Here’s a basic guide on how to perform data fetching in Laman.js:
To display dynamic data, you can use the fetch API within your Edge.js file. Here’s a simple example of how to fetch data from an API and display it on your webpage:
Update src/pages/index.edge with Data Fetching
Modify the src/pages/index.edge file to fetch data from an API and display it. For example, to show a list of blog posts, you can use the following code:
@let(data = await fetch('https://api.vercel.app/blog'))
@let(posts = await data.json())
<html>
<head>
<title>Laman.js</title>
</head>
<body>
<h1>Blog Posts</h1>
<ul>
@each(post in posts)
<li><a href="/posts/{{ post.id }}">{{ post.title }}</a></li>
@end
</ul>
</body>
</html>
In this example:
With Laman.js, you can create dynamic routes that map URLs based on dynamic data. This allows for the creation of pages that adjust to parameters passed in the URL. Here’s how to use dynamic routing in Laman.js:
Laman.js uses a file-based routing system, where file names and directory structures within the src/pages folder determine the URLs of your pages. For example, with the following directory structure:
src
│ └───pages
│ └───index.edge
│ └───getting-started.edge
│ └───prologue.edge
The generated URLs will be:
In the Laman.js project structure, there are two important directories:
To create routes based on dynamic data that may not be known ahead of time, you can use Dynamic Segments. Dynamic segments allow you to handle routes with parameters that are filled in at request time.
Convention: A Dynamic Segment can be created by wrapping a folder name or file name in square brackets: [folderName]. For example, [id].edge or /[slug]/index.edge.
Example of Dynamic Routing:
Create Directory and File Structure Create a new directory and file for your dynamic page. For instance:
src
│ └───pages
│ └───[id].edge
Add Code for Dynamic Page Modify the [id].edge file to fetch data based on the dynamic ID:
@let(id = req.params.id)
@let(response = await fetch(`https://api.example.com/posts/${id}`))
@let(post = await response.json())
<html>
<head>
<title>{{ post.title }}</title>
</head>
<body>
<h1>{{ post.title }}</h1>
<p>{{ post.content }}</p>
</body>
</html>
In this code:
Laman.js offers flexible deployment options to suit your needs. You can choose to deploy your app to LamanHub for a seamless experience or host it on your own server. Here are the steps to deploy to LamanHub:
Register on LamanHub Before deploying, you need to register on LamanHub. Visit the registration page: Register on LamanHub
Fill out the registration form to create your account.
Prepare Your Project Ensure your project is ready for deployment by following the production build steps:
npm run buildThis command will generate the necessary production files in the ./dist directory.
Deploy to LamanHub Once the build is complete, deploy to LamanHub using the following command:
npm run deployThis command will automatically handle the deployment process. For the first-time deployment, the terminal will open your default web browser and prompt you to choose which project to deploy to or create a new project on the LamanHub dashboard.
LamanHub offers:
For more detailed information on API usage, advanced features, and configuration options, please visit the official Laman.js documentation.
In this guide, we've explored the essentials of getting started with Laman.js, from setting up your development environment to deploying your site. By leveraging Laman.js, you benefit from a modern framework designed to streamline the development of dynamic, high-performance websites.
With its intuitive Edge.js templating engine and fast Vite-powered build process, Laman.js simplifies the creation of robust web applications. The ease of server-side rendering (SSR) data fetching and file-based routing enables you to build and manage your site efficiently while maintaining a clean, maintainable codebase. Dynamic routing further enhances your ability to handle flexible URL structures and content.
Whether you’re new to web development or an experienced developer looking for a more straightforward approach, Laman.js provides the tools and simplicity you need to build and deploy your projects effectively. By following the steps outlined in this guide, you can start building engaging websites with ease and deploy them seamlessly to LamanHub or your own server.
As you continue to develop with Laman.js, you'll find that its design principles help you focus on what truly matters—creating great web experiences for your users. Happy coding!