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!

Setup

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 pebl.io to create your free account. It's very important that you claim your free pebl.rocks subdomain! We will be using this to host your react app.

2. Install the pebl CLI
   

    $ curl https://www.pebl.io/install | 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

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

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

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.use(express.static("/static"));
app.get('/*', function (req, res) {
  res.sendFile("/static/index.html");
});

pebl.service(app, "your-subdomain.pebl.rocks");

Note the last line! Replace your-subdomain.pebl.rocks with the subdomain that you claimed while you signed up!

Deploy

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

$ cd project-folder/server
$ pebl deploy

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.

Explore

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

SDK

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
});

Updates

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

Next

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