Oyetoke Toby

Posted on May 19, 2019

How I deployed Codesandbox Apps to Heroku

#react #heroku #node #codesandbox

I was discussing with a friend when we paired code on Codesandbox and trying to deploy to Heroku, we talked about on how far the web has gone with the help of JavaScript and how everything will end up running from the browser.

Yes, on Codesandbox, you can pretty much do anything you can on Visual Studio code or any other code editor. Another good thing is you can directly deploy to Zeit, Netlify and now Heroku on my Codesandbox fork with custom deploy scripts.

In one of my recent tweets, I tweeted the ability to deploy to Heroku, I also talked about the modes of deployments possible with Heroku.

Oyetoke Toby

@oyetoket

deploying from codesandbox to heroku is now almost possible on my fork. @codesandbox @developerayo @coder_blvck

13:30 PM - 17 May 2019

6 51

Modes of Deployment

Deploy to Heroku URL

This is the first and simplest method in deploying sandbox to Heroku. Heroku pretty much made it easier for users to deploy by using a URL whereby you provide a template which is the git repo URL of the code you are trying to deploy as a URL parameter and the repo must include an app.json for your app settings. You must also be logged in to your Heroku account before you can deploy anything.

Below is an example of the url format:

https://heroku.com/deploy?template=<github_url>

Here's a sample app.json file to deploy a react app:

{
  "name": "React Bare App",
  "description": "A barebones React app",
  "repository": "https://github.com/CITGuru/newTapp",
  "logo": "http://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/220px-React-icon.svg.png",
  "keywords": ["node", "react", "static"],
  "buildpacks": [
    {
      "url": "heroku/nodejs"
    },
    {
      "url": "https://github.com/heroku/heroku-buildpack-static.git"
    }
  ],
  "scripts": {
    "postdeploy": "npm run build",
  }
}

You check out more information about the app.json schema documentation.

This method is very easy to implement if you know your way around Heroku and it's currently the supported and ready to use mode in my fork.

Using Heroku Git CLI

This is the second mode that requires a special server to host your sandbox by providing a GitHub url or by a zipped of your code provided by Codesandbox. I am currently working on a Go server that performs this deploy tasks and is able to send back logs. With this method, you wouldn't need to leave Codesandbox or even push your code to GitHub to deploy your code.

The backdrop is you'd have to provide your Heroku login details since the go server will be using this to deploy your code. And this will be asked everytime you wanted to deploy for security reasons.

How the Go server works

It's basically a basic HTTP server that accepts a request. You can either send a request with your zipped code or a Github url and your Heroku login details. It already has predefined commands to better deploy your app even with custom build scripts you defined in your app.json or even Procfile. It uses both Heroku and Git to perform these tasks.

I pretty much don't know if this is the best way, but this will work for sure

How can I Deploy sandbox to Heroku now

Now, lets get to business and see how we can deploy a sandbox to Heroku using my Consandbox fork.

Go ahead and fork/clone my Codesandbox fork and follow the contribution readme to set it up for local use. Ensure you have an account on Codesandbox and login to your account locally (check the contribution guide to know how to).

Once you are done setting up and logged in your account with that, you are good to go.

Create a new react sandbox, after that click on the more button, then click on Fork sandbox.

Add a new file called app.json with below settings:

{
  "name": "myaspp",
  "logo": "http://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/220px-React-icon.svg.png",
  "buildpacks": [
    {
      "url": "heroku/nodejs"
    },
    {
      "url": "https://github.com/heroku/heroku-buildpack-static.git"
    }
  ],
  "scripts": {
    "postdeploy": "npm run build"
  }
}

Above is the settings we'll use to deploy our new react app. Now let's explain what we have in our app.json:

name: Name of the app.
logo: The logo of the app. It shows up in favicon.
buildpacks: This is a very important settings that help us define our app buildpacks. The heroku/nodejs is an official Heroku buildpacks that runs nodejs apps on Heroku, while https://github.com/heroku/heroku-buildpack-static.git is an unofficial Heroku buildpacks for running static files by providing the build the folder.
scripts: This also very crucial because with this we are able to run custom commands and build scripts before Heroku deploys your app. postdeploy is the command entry of scripts, so ensure your other commands are being called from there.

There are many other things you can define in app.json like your environment variables,add-ons, docker-images, dyno and other things you can customize in Heroku.

You can also add a Procfile for custom dyno processes.

Now we need to add a settings file static.json for heroku-build-static:

{
  "root": "build/"
}

This is used to tell heroku-build-static where it can find our build files. The heroku-build-static comes with an express server that serves our static files in the build folders.

The next thing to do now is to deploy, but we need to push our code to GitHub first from Codesandbox.

So click on the GitHub icon, enter any name and click on create repository to push the code to GitHub.

Once thats done, click on the more button and click on fork sandbox.

After this, then we can now deploy our app by using the new deploy to Heroku feature.

Click on deployment, you should see something like below, click on Heroku and click on deploy.

There will be a popup, click on deploy, and you'll be taken to Heroku page where you will start the deploy process and see your app build logs.

If you are not logged in to Heroku, you will be prompted to log in your Heroku account.

Once the page opens up, enter the URL you preferred and click on Deploy app.

Then wait to see your app deploys and build logs and processes.

Tada, and it's successful!

Here's our app: https://kkgugjh.herokuapp.com/

I have tried deploying a vue and angular app with this method and all is good.

Like I said earlier if you know your way around Heroku this will be extremely easy.

I have come to love Codesandbox and would love to be on their development team.

I will probably write more articles on Codesandbox, because I also have a different fork that I am working on to be able to workon Django apps and maybe Ruby later. But that's still far fetched and not enough time to work on it.

If you enjoyed this article, please heart and share.