Skip to content

mramshaw/Meatballs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 

Repository files navigation

Meatballs

Exporing deployment options in the Cloud (mainly from the context of deploying React and Vue apps)

[Full disclosure: I have never seen "Cloudy with a Chance of Meatballs" but the title stuck with me.]

Motivation

While researching competitors to AWS S3 for hosting my ReactAWS repo, I ended up trying out many of them. Which didn't really fit into the goals of that particular project - which was to explore deploying a minimal React scaffold to AWS.

Cloud Deployment Options

Depending upon your deployment requirements, any of the following may be an option:

[Many of them have free options. Most will require installing a CLI tool.]

Bitbucket Cloud

Bitbucket Cloud is a Bitbucket option (Bitbucket is one of the Atlassian companies).

Like both GitHub and GitLab, Bitbucket has a deployment option.

Firebase

Firebase was acquired by Google in 2014.

Firebase helps mobile and web app teams succeed

From: http://firebase.google.com/

Features React Firebase.

Definitely worth a look for Mobile, known for authentication and Crashlytics.

As perhaps might be expected, their firebase CLI is exceptionally useful.

Check out my demo Vue.js app deployed to Firebase at: https://vuerender-f8354.web.app/ or https://vuerender-f8354.firebaseapp.com/

GitHub Pages

GitHub Pages are pretty straightforward.

Check out my Corkboard repo deployed on GitHub Pages: https://mramshaw.github.io/Corkboard/

GitLab Pages

GitLab Pages seem to be pretty much the same thing as GitHub Pages, but for GitLab of course.

Heroku

Heroku is owned by Salesforce.com and offers a number of attractive services.

It uses containers, which are referred to as dynos: http://www.heroku.com/dynos

Deploying to Heroku can be a little bit complicated.

Netlify

Netlify is very easy to use, so a pretty good option.

Of course, Netlify are known for defining Jamstack.

So, not surprisingly, Netlify is really optimal for Jamstack deployments.

Check out my ReactAWS scaffold deployed on Netlify: https://compassionate-sinoussi-40e0e0.netlify.com/

Render

Render seems to be an interesting alternative to Heroku, probably worth investigating.

They offer a summary of how Render differs from Heroku:

http://render.com/render-vs-heroku-comparison

One difference:

Heroku customers running production and staging workloads typically see cost reductions of over 50% after switching to Render

And:

Heroku serves all content over HTTP/1.1. However, major browsers have supported HTTP/2 since 2015. Render serves all requests over HTTP/2, falling back to HTTP/1.1 for older clients. This minimizes simultaneous connections to your Render apps and reduces page load times for all your users.

[Both quotes are from the Render web page. Other differences between the two services are also listed.]

Note that Render can integrate with either a GitHub repo or a GitLab repo.

These appear to be the only deployment options available (for now?).

Apart from the GitHub / GitLab root repo proviso, seems like a nice service.

Note that - at the free level - the Let's Encrypt site certificate expires in three (3) months.

Stackbit

Stackbit describe themselves as:

THE BEST WAY TO JAMSTACK

[I am including them here for completeness, but they are probably only for Jamstack deployments.]

Surge

Surge appears to be for static websites only, so perhaps not suitable for React.

Surge describes themselves as:

Static web publishing for Front-End Developers

From: http://surge.sh/

[Note the Static part.]

And:

Surge has been built from the ground up for native web application publishing and is committed to being the best way for Front-End Developers to put HTML5 applications into production.

From: http://surge.sh/help/getting-started-with-surge

Zeit

[Zeit is sometimes referred to as simply Now.]

ZEIT Now is a cloud platform for static frontends and serverless functions. It enables developers to host websites and web applications that deploy instantly, scale automatically, and require no supervision.

From: http://github.com/zeit/now/tree/master/examples

Reference

Some useful reference notes follow.

Jamstack

Jamstack (formerly known as JAMstack) is an architecture defined by Mathias Biilmann (CEO & Co-founder of Netlify):

A modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup

[The JAM in Jamstack stands for Javascript, APIs, and Markup. So ... somewhat more than a static website.]

It’s a new way of building websites and apps that delivers better performance, higher security, lower cost of scaling, and a better developer experience.

From: http://jamstack.org/

Check out Jamstack examples here: http://jamstack.org/examples/

[Incidentally, Jamstack sites are considered by AWS to be well-architected.]

To achieve optimal efficiency and cost reduction, Jamstack sites require a CDN.

Jamstack sites are serverless:

The thing that they all have in common is that they don’t depend on a web server.

From: http://jamstack.org/

While Jamstack sites are effectively serverless, Jamstack itself is not considered to be serverless.

To Do

  • Add links to a Vue.js app deployed on Firebase
  • Add link to a React.js app deployed on GitHub Pages
  • Add more details on Render versus Heroku
  • Remove link to deleted Heroku deployment (Heroku is no longer free)
  • Remove link to deleted Render deployment
  • Investigate Twelve-factor options
  • Add more notes on cloud deployment options