Wrapper.js: A New Devops Library
Tags: serverless, javascript, webxr, devops
Published: 2022-10-16 17:11:59

---
title: Wrapper.js: A New Devops Library
published: true
date: 2022-10-16 16:49:16 UTC
tags: serverless,javascript,webxr,devops
canonical_url: https://jamesmiller.blog/unwrapping-wrapper-js/
---

Unwrapping the details on Wrapper.js: what it is, why I made it, how it works and where to find out more!

![](https://cdn-images-1.medium.com/max/1000/1*5yPOoD8Ylgoevkx93i42Iw.jpeg)

I’ve recently created documentation for my first open source project called [Wrapper.js](https://jamesmiller.blog/wrapperjs/).

In this blog post, I’ll briefly explain what it is, why I made it, how it works and where you can learn more about how to use it.

### What is Wrapper.js

Wrapper.js is an open source configurable wrapper script, that aims to speed up development and deployment of web experiences.

To start off with, it is released with a couple of ready made templates that let you spin up an out-of-the-box and fully configurable experience (see the [WebXR template](https://jamesmiller.blog/wrapperjs-webxr-template/) as an example).

In the future the hope is that, you can choose to configure your app with other libraries and easily spin up projects that use emerging technologies.

![](https://cdn-images-1.medium.com/max/1024/1*lick3Y365nbeda3KO8ABtQ.jpeg)

### Why I made it

Over the years of working on Creative Technology projects, I’ve slowly grown to use certain technologies as part of a mono-repo setup, that are flexible enough to be adapted to most projects:

- **Next.js** : an opinionated React.js frame work for Front End development, that comes with a variety of helper functions to help speed up development and build of your web app.
- **Serverless Framework** : an Infrastructure as Code (IaC) framework that comes with CLI commands that help you develop lambda functions locally and then deploy them to an API Gateway
- **Terraform** : an Infrastructure as Code (IaC) framework that uses Hashicorp Configuration Language (HCL) config files to create, manage and deploy cloud resources.

Over time I ended up informally creating a wrapper script to help orchestrate these technologies, so I could re-use this base template from a ‘full stack’ perspective and spend time focusing on project specific functionality.

I’ve found this wrapper script very useful in helping me deliver projects — so I thought I’d formalise it into an [Open Source project ](https://github.com/JamesMillerBlog/wrapper.js)— in case someone else other than me finds it helpful :)

![](https://cdn-images-1.medium.com/max/1024/1*mDVQINUx2-5La8y8hC-Vgw.jpeg)

### How does it work

Full instructions can be found on [this page](https://jamesmiller.blog/wrapperjs-getting-started/), but here is an oversimplified summary in 3 steps.

#### 1. Select a template

Once you’ve installed necessary libraries, choose a template you want to use, for example the WebXR template.

![](https://cdn-images-1.medium.com/max/1024/1*gVY8KKyKM5vNSbR45w_AqQ.gif)

#### 2. Configure the app

Use CLI commands to create an AWS Secret and S3 bucket for your template configuration.

![](https://cdn-images-1.medium.com/max/998/1*Jsic3UkqsdTdBJ_sPVwwDA.jpeg)

Then use **gobble** CLI commands to use those secrets to deploy your customised template.

![](https://cdn-images-1.medium.com/max/1024/1*I1H8EJq5j-CeMiKu4sDs9Q.jpeg)

#### 3. Dev and deploy

Continue using gobble CLI commands to develop your full stack app on your local machine — or integrate wrapper.js into your continous deployment pipeline to automate dynamic deployments for the different environments of your app!

![](https://cdn-images-1.medium.com/max/783/1*FzF_ViobPDrgON9jXp2vRA.jpeg)

### Where to learn more

To find out more details about Wrapper.js, you can see the below links:

- [Summary](https://jamesmiller.blog/wrapperjs/)
- [About](https://jamesmiller.blog/about-wrapperjs/)
- [Getting Started](https://jamesmiller.blog/wrapperjs-getting-started/)
- [Github](https://github.com/JamesMillerBlog/wrapper.js)
- [NPM Package](https://github.com/JamesMillerBlog/wrapper.js/pkgs/npm/wrapper.js)

![](https://cdn-images-1.medium.com/max/1024/1*9yPGm0SLT7rcTYW3cSTgVw.png)

* * *