Three Steps to Using a Web IDE to Develop and Build in the Cloud

Image for post
Image for post

I believe that using a browser as an IDE is the future.

A lot of people easily switched to VS Code; moving to a Web IDE will be just as easy. With a Web IDE you could develop on an iPad or Chromebook at a coffee shop. A Web IDE makes source code safer as the entire code ‘doesn’t walk out the door’ with the developer. It also makes it easier to onboard new developers: I don’t have to worry about their local setup.

Using a Web IDE should increase productivity. In fact, I see using a Web IDE as a part of the low-code movement. This is why it is one of the 10 pillars for METABAKE.ORG.

So let’s do the three steps to developing in the Cloud, beginning with a little prep work.

Preparation: Create a test app and deploy to S3

a) With your favorite editor, create an index.html:

<head/>
<body>
<p>Oh hi</p>
</body>

b) Setup AWS S3 as your HTTP server and mount it to a drive on your computer. Follow these instructions.

c) Copy the index.html to the mounted drive, and view it on the web. The ‘Endpoint URL’ will look something like this:
http://YOUR-BUCKET.s3-website-us-east-1.amazonaws.com

At this point, any edits of index.html in your mounted drive should show up when you refresh the browser!

Note: If you get stuck, you can post a question at
http://chat.metabake.org

Step 1: Connect to the test app from the Web IDE

a) Create a CodeAnywhere (CA) account and login.

b) In CA, connect to S3, using your AWS Access Key ID and Secret Access Key.

c) Edit index.html in CA and save. See the edits reflected at
http://YOUR-BUCKET.s3-website-us-east-1.amazonaws.com

How much fun was that!

Step 2: Connect to the app from a Linux container

a) Create a Linux container in the Cloud (e.g. an Ubuntu instance on Digital Ocean).

b) In CA, connect to the Linux container. Via CA, SSH into it.

c) In Linux (SSH), mount S3 to a Linux folder using ‘goofys’. Follow these Cloud Mount instructions.

You should be able to see your S3 bucket mounted as a folder in the Linux file system.

Now you can edit your S3 web app from a CA Linux connection. Why would that be useful? Let’s see step 3.

Step 3: Run a custom build script via CA

a) Create a simple build script, using gulp, grunt, or our own ‘mbake CLI’ (via npm -g i mbake; more at https://metabake.org)

b) Setup your build script to ‘watch’ (Metabake/mbake does this out of the box.)

FUN! You are now a team player! If any of your team members edits your S3 web app (as our Step 1) — your Linux box will ‘auto build’ it.

You would be amazed by how much faster the Cloud build is compared to a build on your developer machine.

Get to the next level with automatic programming

Metabake includes a build server written in pure JavaScript that can be customized to generate code. With Metabake you can go from writing code to instructing a machine to write code for you. This follows the ‘Less Coding’ philosophy and will get you to another level of productivity.

Ask us to help you using Metabake for automatic programming.

Written by

Front-end aficionado, Founder and Partner at m.appthings.io

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store