Host your static websites (react, angular, svelte) 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.2, 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.

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.
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.
Authenticate the pebl CLI by running pebl auth
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 here, but you can choose any framework that creates a bundle (e.g. npm run build).

$ 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, let's upload it to pebl's cluster using the cli. If you have an existing project that you are using, make sure to navigate to that project before executing the command.

$ cd project-folder/my-app
$ pebl folder upload build static
 :: uploading folder as name static
 :: success! the new uploaded version is: coawer
$

The command is taking the folder build, and uploading into the pebl cluster with the handle static. Each upload for the same handle is versioned, and the tool is telling us this specific upload is versioned as coawer. We will get into what this handle is, and the significance of the version.

You can check pebl folder upload -h for more information about the command.

Serving with Express

In order to actually serve the bundle, we will be using express with Node. But note that you can also use Python or Go.

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

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.

If you've used express previously, the index.js file should be very familiar. The key difference is that we're first calling pebl.mount("static", "/static"). This method is specifying the folder identifier static (remember the upload command), and requesting that it be made available in the local filesystem at /static.

Then we initialized the express application with the express.static middleware.

Finally we have the pebl.service method, which binds the provided server and the endpoint.

Pebl currently supports many other cloud methods like these, and you can learn more about them through our SDK reference.

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.

Versioning

Remember when we uploaded our bundle, the CLI printed a line about versioning? For each folder identifier, pebl versions each upload so that you can reference each version.

Say we make some changes to the react application, and upload a new version. In order to see these changes reflected, all we have to do is to run pebl deploy again in our application.

But what if we want to rollback? Perhaps there's a bug in the new bundle. First use the cli to list all the versions for an identifier, in this case static.

$ pebl folder list static
NAME
static:coawer
static:dtzmoj

Then you can reference a specific folder version in the mount call.

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

await pebl.mount("static:coawer", "/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");

And once you run pebl deploy, you will see the previous version of the bundle being served.

Explore

Now that we've got through how to utilize mount, let's cover some other information about pebl.

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

And within your react application calling fetch("/some/endpoint").

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

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