How To Deploy Open Web Components to Heroku
Tags: openwc, heroku, httpserver, webcomponents
Published: 2022-06-04 06:30:47


## Prerequisite

This post assume you got the prerequisite items below:

- Your app is scaffolded using the [**Open Web Components** generator.](https://open-wc.org/guides/developing-components/getting-started/) and...
- You already have your open-wc application **working** in your local machine.
- You are now **ready** to deploy your application to **Heroku**.
- You like using **Github**.


## Building

The goal right now is to generate the static files of your application. The complete steps in doing this can be found in open-wc website's [rollup page](https://open-wc.org/docs/building/rollup/).

For our convenience, listed below are items necessary for this basic deployment.

### 1. Install rollup packages.

```
npm i -D rollup @open-wc/building-rollup rimraf deepmerge es-dev-server
```
### 2. Create a `rollup.config.js` file in the root folder of your app.

```
import merge from 'deepmerge';
import { createSpaConfig } from '@open-wc/building-rollup';

const baseConfig = createSpaConfig({
  developmentMode: process.env.ROLLUP_WATCH === 'true',
  injectServiceWorker: false,
});

export default merge(baseConfig, {
  input: './index.html'
});
```
### 3. Add the following NPM scripts to your `package.json`

```
{
  "scripts": {
    "build": "rimraf dist && rollup -c rollup.config.js",
    "start:build": "npm run build && es-dev-server --root-dir dist --app-index index.html --compatibility none --open"
  }
}
```
### 4. Run `npm run build` command.
This will generate a `dist` folder that will contain the optimized static files of our project. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o7z2fnhae8keh13ypboc.png)

### 5. Breath, sip your coffee. Succeeding steps below are easy too!


## Github

Oh you like Github huh! Luckily, Heroku has the deployment method that connects your Github repository and allow you to manually (or automatically) deploy your application. We'll see that in a bit.

From this point, we will focus on the `dist` folder alone and it's contents. We aim to deploy this in Heroku.

### 1. http-server
`cd` to your `dist` folder and let's install the `http-server` package.

```
npm install http-server
```

### 2. package.json
Make sure there are scripts section in your `package.json` file of the `dist` folder. The `package.json` content should be similar to this:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/13nyv1vl1dc2qubdsio4.png)

### 3. `git push`
**`push`** to your Github. Still in your `dist` folder, run the commands below.

```
git init
git remote add origin https://github.com/[yourname]/[yourrepository.git]
git branch -M master
git push -u origin master

```
After this successful pushed to Github, let's go now to Heroku.

## Deploy

In your Heroku application page, go to the _Deploy_ page. Down below is the **Deployment method** section. 

#### - Choose Github. 
#### - Search your repo name..
#### - and Connect!
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rkab6sco6ph6fvs9mf41.png)

Once connected, **click deploy button** in Manual deploy section below the page.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cclpnq0x39d70ih0sjfk.png)
 

After the Heroku's build process, You should now be able to visit your application via Heroku's generated url.