Bun is an all-in-one JavaScript runtime & toolkit designed for speed, complete with a bundler, test runner, and Node.js-compatible package manager.

You might have heard the hype – it promotes itself as a much faster replacement for Node and Yarn and with a quick test, bun install took 9 seconds vs npm install‘s 68 seconds. Quite impressive!

Let’s see how we can create and deploy a Bun server to Plesk:

Note: You can download the repo I created for this post here: https://github.com/mytchallb/blog-bun-docker

Create a Bun project

Install Bun on your system with:

curl -fsSL https://bun.sh/install | bash

Now create a Javascript/Typescript/React file to use for your app.

I’m going to use a .jsx React file to test Bun’s native support of React files.

It’s a simple HTTP server that listens on port 8081 and routes to different components based on the url.

JavaScript
import { renderToReadableStream } from "react-dom/server";

function Component(props) {
  return (
    <body>
      <h1>{props.message}</h1>
    </body>
  );
}

Bun.serve({
  port: 8081,
  async fetch(req) {

    const url = new URL(req.url);
    let component = "";

    switch (url.pathname) {
      case "/":
        component = <Component message={"Welcome to the Bun server running on Plesk through Docker!"}/>;
        break;
      default:
        component = <Component message={"Hello from server at " + url.pathname} />;
        break;
    }

    const stream = await renderToReadableStream(component);
    return new Response(stream, {
      headers: { "Content-Type": "text/html" },
    });
  },
});

console.log("Bun listening on port 8081");

Run your app with bun start and stop it with Ctrl+C.

Add a Dockerfile

Dockerfiles are used to build a Docker image which contains everything Docker needs to run your app.

Create a file named Dockerfile. My one looks like this:

Dockerfile
FROM oven/bun

WORKDIR /usr/src/app

COPY . .

RUN bun install

CMD [ "bun", "start" ]

It uses oven/bun as the base image and sets the working directory for the next commands.

It copies files from my project root into the docker image, installs dependencies and runs the bun start command.

Note: The array form (CMD [“executable”, “param1”, “param2”]) expects the first element to be the executable and the rest its parameters.

Build the Docker image

Make sure you have Docker installed locally, and run the build command:

docker build -t bun-react:v1 .

You can test this image by going into Docker Desktop and running it.

The next step is to save this new image as a file to upload:

docker save -o bun-react.tar.gz bun-react:v1

Add your image to Plesk

In your Plesk installation, make sure the Docker extension is installed and go to it’s page.

When trying to upload an image through this interface and start it I came across a Plesk bug mentioned here.

The solution is to add your Docker image another way, and link the image to Docker using the terminal.

Either use SCP to copy your file to your server, or if you have a domain set up for your Docker container, simply use the file manager to upload it.

Now either SSH into your server or go to Plesk’s Tools & Settings > SSH Terminal.

Navigate to where the image is uploaded:
cd /var/www/vhosts/blog-bun.mytchall.dev/httpdocs

And link it with this command:
docker load -i bun-react.tar.gz

Now your custom image is in the Docker catalog.

Note: You could upload it to Docker Hub as a public image and link it that way.

Running the container with port remapping

Another bug in Plesk is that if you start this container and turn off automatic port remapping, you may not be able to specify your custom ports.

To get around that, we can use the terminal again to start our container:
docker run --name "BunReact" -p 8081:8081 -td bun-react

Now back in the Docker catalog you can see the image is running!

Note: docker ps shows running images.

Going into the settings you can see port remapping is available, and in my case linked to port 8081.

The last step is to point a domain at your image.

Go to your domain settings > Docker Proxy Rules. Click Add Rule.

Choose the image and ports to proxy to your domain.

That’s it, your application should be live!

Conclusion

Docker makes it easy to run a wide variety of tools like Bun. Plesk still has a way to go in smoothing out the process of managing images without the Docker Hub.

I’m excited to keep playing with Bun and see how it can improve the developer experience. It’s pretty cool to be able to just run a react file without any build steps and seems like a much faster tool compared to Node!


Further Reading

Comment

Note: Comments are moderated, URLs not permitted.