First look at Aleph.js: A new React framework in Deno

Aleph.js is an open-source JavaScript framework inspired by the popular framework Next.js. The framework is much newer than Next.js and is currently in its alpha phase.

The framework has a dedicated open-source community that fixes bugs. This article gives an overview of Aleph.js and a guide to its features.

Aleph.js overview

Aleph.js is built with security in mind, so it uses the JavaScript/TypeScript framework Deno for its runtime environment. Using Deno means that Aleph.js users have total control over what their programs can use, and must explicitly allow access, whether using files on the server or changing environment variables.

Developers don’t need to configure Aleph.js after installation because it is built for simplicity and does a lot of work behind the scenes. Instead of requiring a developer to use a third-party JavaScript bundler, Aleph.js handles importing with standard ES6 syntax that allows developers to place and remove JavaScript pieces at will.

This level of security and simplicity is possible because Deno is written in the Rust language, and those qualities then extend to Aleph.js. Rust was developed as a simple solution to common web development security problems, like unauthorized file access and cross-site scripting, so Aleph.js is well-protected against those issues.

At the time of writing, the Aleph.js creators explicitly state that the framework will work on the latest versions of Google Chrome, Microsoft Edge, Mozilla Firefox, Safari, and Opera. It may work on other browsers as well, but no other browsers have yet been verified by the Aleph.js creators. You should be cautious with other browsers until they are verified by the creators at a later date.

Aleph.js features

Aleph.js has many useful features that allow developers to customize their webpages and deploy them in dynamic ways. This flexibility makes Aleph.js useful to developers at any skill level or in any career trajectory.

Routing

Aleph.js uses a generic routing framework to build webpages and API endpoints. The address of a page or an API endpoint comes directly from its data file name. This practice encourages simple and clear naming conventions that help website and API users find what they need quickly.

Data files can be in multiple formats, including JavaScript (.js), ECMAScript module files (.mjs), JavaScript XML (.jsx), TypeScript (.ts), TypeScript XML (.tsx), and Markdown (.md). Routes can be static or dynamic, and the routing framework supports nesting so users can create page or API hierarchies.

The routing framework also makes internationalization easy with a locale option. Aleph.js routes give you a flexible way to direct website users where they’re needed most.

---

Over 200k developers use LogRocket to create better digital experiences

Learn more →

---

SSR and SSG support

The framework supports both server-side rendering (SSR) and static site generation (SSG). Aleph.js pre-renders pages by default so the client’s browser doesn’t have to do all the work. You can turn off this SSR if you choose, but it may result in your page or API endpoint running slowly.

The SSG option, on the other hand, creates a stand-alone website that can run on any server but relies on the client to do the JavaScript heavy lifting. SSG also requires you to redefine dynamic routes as static paths before generating the website. Supporting both SSR and SSG gives Aleph.js the ability to easily handle large and small sites.

Aleph.js allows SSR and SSG configuration in a file called aleph.config.js. Configuration through this file requires writing valid JavaScript, so some SSR and SSG abilities require careful coding.

For example, excluding paths from SSR requires a JavaScript export statement:

export default {
  "ssr": {
    "exclude": [
      "/path/from/root"
      "/path/from/root/two/"
    ]
  },
  ...
}

Similarly, specifying dynamic paths in SSG requires knowledge of asynchronous JavaScript and static paths to return SSR:

export default async () => {
  const data = await (await fetch("https://.../data")).json()
  return {
    ssr: {
      exclude: [...],
      staticPaths: data.map(({id}) => `/data/${id}`)
    }
  }
}

Hot Module Replacement

Aleph.js also contains a feature called Hot Module Replacement with Fast Refresh, or simply HMR. This feature allows you to refresh your pages in a browser by refreshing the Aleph.js app you are currently working on. You can see the results of changes to JavaScript XML, TypeScript XML, and Markdown files.

Since page styling can also influence how well readers interpret content, HMR works with CSS files and files created for the LESS preprocessor. A major advantage of using HMR is that you don’t have to worry about refreshing your work in multiple places when you make changes. Aleph.js saves you time and ensures that you’re always looking at the most recent results of your work.

Easy customization

The framework gives you many customization options, both in your JavaScript application and in the pages your application generates. By customizing the default React App, you can control the way a page or API call initializes, using techniques like templated elements and targeted error handling.

Aleph.js also supports the injection of many important page elements, including the page head, scripts anywhere on the page, and asynchronous imports. By default, Aleph.js shows a blank screen while pages are loading, but you can customize a loading screen.

Although the framework provides a default 404 page when a file is not found, you can also customize the page displayed when this error occurs with a function called E404. As with SSR and SSG customization, error pages are specified in aleph.config.js.

export default function E404() {
  return <h1>LogRocket Page Missing</h1>
}

Aleph.js setup and install

Aleph.js requires minimal setup with two simple commands.

1. Install the Deno runtime. You can install it as an executable or by using one of many programs from the command line.Mac/Linux shell:

curl -fsSL https://deno.land/x/install/install.sh | sh

Windows PowerShell:

iwr https://deno.land/x/install/install.ps1 -useb | iex

1. Install Aleph.js using Deno from the command line. As of this writing, the version number is 0.2.28.

deno install -A -f -n aleph https://deno.land/x/[email protected]/cli.ts

Conclusion

Aleph.js is a JavaScript framework that is in active development but shows a lot of promise. Its community strives to make deployment simple for easy adoption.

The framework already stands out due to its focus on security, and the community has plans to continue that trend as it adds more features. You can probably expect to see Aleph.js popping up in many more discussions once it comes out of its alpha phase.

Are you adding new JS libraries to improve performance or build new features? What if they’re doing the opposite?

There’s no doubt that frontends are getting more complex. As you add new JavaScript libraries and other dependencies to your app, you’ll need more visibility to ensure your users don’t run into unknown issues.

LogRocket is a frontend application monitoring solution that lets you replay JavaScript errors as if they happened in your own browser so you can react to bugs more effectively.

https://logrocket.com/signup/

LogRocket works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app’s performance, reporting metrics like client CPU load, client memory usage, and more.

Build confidently — Start monitoring for free.