Host your React, Angular, Svelte, or any other framework for free with pebl!
Tags: pebl, react, angular, vue
Published: 2023-08-19 06:17:57

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](https://blog.pebl.io/release-12), 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](https://discord.gg/qV67JnJMZZ)!

## 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](https://www.pebl.io/signup) 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](https://docs.pebl.io/setup).
  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](https://create-react-app.dev/) 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:

```js
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.

![A browser window showing a successful deployment of the server](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/879o58ck9n5uytj1pm2d.png)

## 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](https://docs.pebl.io/sdk/service) 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](https://docs.pebl.io/category/guides) for how to use pebl. And make sure to join our [discord](https://discord.gg/qV67JnJMZZ)!