DEV Community

Cover image for Host your React, Angular, Svelte, or any other framework for free with pebl!
Jin Lee for pebl

Posted on • Updated on

Host your React, Angular, Svelte, or any other framework for free with pebl!

Pebl is a cloud computer. It gives you programmatic bindings to control the cloud right from your application. No more configs, or stringing together disparate tools in adhoc ways. Just code to define your cloud!

We just released pebl v0.1.1, which includes support for mount. This makes it super easy to host any static website with pebl.

So let's get into it, and make sure to join our discord!


We first need to configure our development environment. We've made this super fast, so it should only take you 5 minutes.

  1. Head over to to create your free account. It's very important that you claim your free subdomain! We will be using this to host your react app.
  2. Install the pebl CLI

     $ curl | sh

    If you want to go through the steps manually, you can follow the steps here.

  3. Authenticate the pebl CLI by running pebl auth

  4. Finally, create a project folder

     $ mkdir project-folder

The Static Bundle

Let's generate an example website. If you already have a project that you want to use, you can skip this section.

We will be using create-react-app which makes it super fast to get started:

$ cd project-folder
$ npx create-react-app my-app
$ cd my-app
$ npm run build
Enter fullscreen mode Exit fullscreen mode

At this point you will have a folder ~/project-folder/my-app/build which contains the base react app.

Uploading the Bundle

Now that you have a static bundle, we can upload it into pebl's cluster. You can use pebl's CLI to do this:

$ cd project-folder/my-app
$ pebl folder upload build static
Enter fullscreen mode Exit fullscreen mode

If you have an existing project that you are using, make sure to navigate to that project and run pebl folder upload build static.

Serving with Express

We'll utilize Express + Node to serve this react bundle, though pebl supports Python and Go which can also be used.

Let's create a folder server to house the server, and initialize a node project:

$ cd project-folder
$ mkdir server
$ cd server
$ npm init -y
$ npm pkg set type="module"
$ npm pkg set scripts.start="node index.js"
$ npm i express pebl@v0.1.1
Enter fullscreen mode Exit fullscreen mode

Now create an index.js which will contain our express server:

import express from "express";
import * as pebl from "pebl";

await pebl.mount("static", "/static");

const app = express();

app.get('/*', function (req, res) {

pebl.service(app, "");
Enter fullscreen mode Exit fullscreen mode

Note the last line! Replace with the subdomain that you claimed while you signed up!


Now we will deploy using pebl's CLI. Run pebl deploy within the server folder:

$ cd project-folder/server
$ pebl deploy
Enter fullscreen mode Exit fullscreen mode

This will be available immediately! Navigate to your url using your browser and you should see this react app. Make sure to use https, as all pebl deployments get TLS certificates for free.

A browser window showing a successful deployment of the server


Now that we've got things working, let's unpack a few key things.


The power of pebl comes from its SDK, which provide programmatic bindings that unlock cloud capabilities.

In this example we utilized pebl.mount and pebl.service. You can check out the pebl reference to find out more information about how they work.

Adding APIs

The key benefit of pebl is that you can now easily extend your server to provide API's that your frontend can rely on. It's as simple as extending the express app to have routes:

app.get('/some/endpoint', function (req, res) {
  // your custom API logic here
Enter fullscreen mode Exit fullscreen mode


If you want to update your website, it's super easy! Just go through the process of uploading your new bundle with pebl folder upload, then re-run pebl deploy within the server/ folder.

So something like:

$ cd project-folder/my-app
$ npm run build
$ pebl folder upload build static
$ cd ../server
$ pebl deploy
Enter fullscreen mode Exit fullscreen mode


We have a ton of guides for how to use pebl. And make sure to join our discord!

Top comments (0)