Deploy Serverless Laravel with WebAssembly

In-depth guide about how to deploy a serverless Laravel Application with bleeding edge technology, The Web Assembly.

Photo by Emile Perron on Unsplash

Nowadays many developer and engineer tend to use serverless architecture to deploy web applications, especially on the most loved framework, Laravel.

Why serverless you may ask? because it can perform better, scalable, and cost efficient. Serverless is an alternative if you don’t want bother to implement containerization and orchestration, using Docker, k8s, etc.

Me personally uses Laravel framework a lot, for side projects and my freelance job. It is a pretty good framework that fit as solution for most of the web application projects out there.

In order to deploy a serverless Laravel app, there are a lot of options to choose. You can use Laravel Vapor, Render, and others.

But, most of them are a paid service, and cost too much for student or small developer. For example, Laravel Vapor itself cost $39 per month just for the platform, not including usage billing that mostly powered by AWS Lambda.

A more cheaper option is to use Render or Koyeb, that cost $5 per month in average. Same serverless concept, but with different technology to implement it.

But, there is a more cheaper option than those. And the good thing is, it is free to use and can outperform of those serverless platforms. But first, lemme tell you something about the technology underlies.

The WebAssembly

WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. It is designed as a portable compilation target for programming languages, enabling deployment on the web for client and server applications — webassembly.org

It is basically a deployment technology that can run anywhere, with any programming language, including PHP that Laravel uses.

WebAssembly 1.0 support most of the popular programming language, and have been supported on 4 major web browsers engine (Chrome, Firefox, Microsoft Edge, and Safari).

Not just limited to web browsers. It can be used in other environments, such as:

• Server-side: Using runtimes like Wasmer or Wasmtime, you can run WebAssembly modules on servers, enabling high-performance computations in various back-end applications.
• IoT and Embedded Systems: WebAssembly’s portability makes it suitable for running on small, resource-constrained devices.

To not confuse about, Web Assembly is NOT the same as Assembly programming language. WebAssembly (Wasm) and Assembly languages share some similarities but are fundamentally different in several ways

Why WebAssembly

Here are some key points about WebAssembly:

1. Portability: WebAssembly is designed to be a portable compilation target. Code written in many languages like C, C++, Rust, and others can be compiled to WebAssembly, which can then run on any web browser that supports it.
2. Performance: Because it is a low-level binary format, WebAssembly can execute at near-native speed. This makes it suitable for performance-critical tasks, such as games, simulations, and other intensive applications.
3. Security: WebAssembly runs in a safe, sandboxed environment. This ensures that it can’t perform unsafe operations, making it secure to run untrusted code.
4. Interoperability: WebAssembly can work alongside JavaScript. Developers can call WebAssembly modules from JavaScript and vice versa, allowing for seamless integration of high-performance code into existing web applications.
5. Size and Load Time: The compact binary format of WebAssembly results in smaller file sizes and faster load times compared to JavaScript.
6. Support: Major web browsers (like Chrome, Firefox, Safari, and Edge) support WebAssembly, making it widely accessible.

Okay, this technology seems promising, but how it works though?

In short, WebAssembly will compile your Laravel App that written in PHP to a binary format (.wasm). And later then, it will be served and executed on the client’s web browser if any requests exist. Just as simple as that!

And to simplify the implementation this technology, we will use Wasmer to deploy your app via server-side runtime.

The Wasmer

Wasmer is one of the server-side runtime for WebAssembly that available out there.

The main point why I recommend you to use this runtime is that, it is free, easy to use, and have several great features to start using WebAssembly for your project.

Wasmer have 3 main features,

1. Wasmer Runtime: to run your code / application in any platform, from iOS to Android, from Windows to macOS or Linux. From the server to the browser. This feature is mostly used for deploying an IoT or application that run natively (desktop, mobile).
2. Wasmer Deploy: to publish a Wasmer package or library for any application that built with it. It is basically NPM for Wasmer runtime.
3. Wasmer Edge: to deploy a server-side application using serverless technology. This is the feature that we use for deploying web applications.

It don’t even take 5 minutes to deploy your Laravel App with Wasmer Edge. Lemme guide you through.

Launch Your Laravel with Wasmer Edge

You need to register or login your Wasmer account to start using this platform. If you’re already on dashboard, click the Create App on the right-top side of the page.

Then search “Laravel” as your starting point templates. If you’re already have a Laravel app project, you can deploy it using Wasmer CLI.

Connect to your GitHub Account so that Wasmer can create a new repository for the app. The repository can be created in private visibility.

And just it! Your Laravel app is now publicly available. Example site is deployed on https://29yhyi3cdylr.id.wasmer.app.

Since this is a serverless platform, your app is run with stateless concept, meaning you need a separated database instance if you want to store a data.

You can use PlanetScale or NeonDB as a DBaaS (Database as a Service).

But how about the configuration and environment variables? Please read more on the these references.

App Configuration (app.yaml) - Wasmer Docs

Secrets - Wasmer Docs

PlanetScale and Wasmer Edge: Quick Start - Wasmer Docs

And about the billing price, until I wrote this article, The Wasmer Edge billing usage is $0 (the price may changes in future).

Conclusion

Using WebAssembly as your main deployment stack have it’s own pros and cons, since this is a relatively new technology that not much used yet.

But, as I described above, Wasm surely have a bright future because of it’s promising features and capabilities to run any language in any machine as fast as native performance.

You may want to check out more about this technology by yourself before commit to using it in production.