Netlify for the frontend, Micro for the backend

Jamstack

The one question we’ve really been seeing a lot though is “What’s Netlify for the backend?”. Many of those frontend users building Jamstack apps on Netlify are looking to where they can find and build these APIs. It seems even Netlify’s current answer has been, “go host something on heroku”. I think in 2020 this just doesn’t fly. If the frontend is being reimagined then the same has to happen on the backend to cater for that use.

Netlify for the Backend

M3O is a platform for cloud services development. The fastest way to build APIs without managing the infrastructure. M3O makes use of Micro, an open source platform for microservices development. What we get from Micro is a powerful framework for building, running and consuming APIs as microservices. What M3O brings to the table is Micro as a Service, a fully managed platform for building microservices. Write services in Go and gRPC on the backend, expose them dynamically via HTTP API to be consumed by the frontend. M3O looks to fill that gap in the market for frontend devs. M3O is Netlify for the backend.

M3O Features

M3O is a fully managed Micro services platform. What does that mean? Micro provides the building blocks for writing, running and consuming microservices. From source to running and beyond. M3O takes that and hosts it so you can just get on with writing APIs without worrying about the underlying infrastructure.

Here’s a few of the key features and services:

• Microservices development using gRPC and protobuf code generation
• Service runtime and process lifecycle management
• Source to running builds without need for CI/CD
• Authentication and authorization for access control and user management
• Dynamic configuration and secrets management
• PubSub messaging and event streaming
• Service discovery and secure networking
• Key-value storage and persistent CRUD
• Automatic HTTP routing with path based resolution
• Identity aware proxy for remote access and gRPC-web apps
• Public API gateway and TLS support by default
• Public and private repos support including github, gitlab and bitbucket

M3O is a feature complete platform for microservices development from generating service templates on your local machine through to writing and running it in the cloud all using the same Micro CLI experience. M3O exposes HTTPS urls for you dynamically by default. So every service automatically becomes an API as soon as you deploy it.

Where a new development model has emerged for the frontend, we think its dictating the “headless” paradigm shift for the backend and M3O wants to be there to host all of those APIs as Micro services.

API First

We are seeing the emergence of APIs as the dominant form factor for cloud services, from AWS all the way through to Twilio and Stripe. What’s even more compelling is while this model has emerged in the past few years, we are only really just getting started. It’s our belief that in a decade from now some of the most important companies will be API first yet strangely there is no platform to caters to this form of development.

Twilio, Stripe and others have all had to build out the infrastructure for their API first approach. We think as many more companies go down this path the tools must emerge to empower them, not just at the compute layer but by providing the higher level abstractions required. That’s the goal of M3O.

But don’t just take our word for it. We’re going to walk you through a demonstration of the value proposition so you can see for yourself just how powerful Micro and M3O are.

Building a backend

You’re going to be writing and deploying APIs in minutes rather than hours or days! No more dealing with infrastructure on the backend, just as Netlify empowered devs on the frontend, we’re doing the same for a new generation of developers on the backend.

Let’s walk you through it. We’ll deploy an existing Micro blog service with this demo frontend on Netlify: https://loving-goodall-44ee08.netlify.app/. But first let’s start with signup.

Signup to M3O

First you start by signing up to M3O and registering for a free account in our Dev environment.

Start by installing micro

curl -fsSL https://install.m3o.com/micro | /bin/bash

For those wary of curl into bash, you can view it first https://install.m3o.com/micro.

Signup is purely CLI based for now so just issue the following command and follow the steps

micro signup

Once you’re done you should have an account on M3O and be automatically logged in.

Run Helloworld

Validate that by running helloworld.

micro run github.com/micro/services/helloworld

Check it’s running and try call it via the CLI.

# check the status
micro status

# call helloworld
micro call helloworld --name="Alice"

OK now we get to the more interesting part. Call it via the HTTP API that’s dynamically generated for you.

# get your namespace
NAMESPACE=$(micro user namespace)

# curl your unique url
curl "https://$NAMESPACE.m3o.com/helloworld?name=Alice"

If alls good, we can move on to running something a bit more interesting.

Deploying a dynamic blog backend

We’re going to deploy a headless CMS, or better known as a Blog API.

On the open source side, Micro maintains some reusable example services we can all play with and contribute back to. You can check them out at github.com/micro/services. Let’s bootstrap the blog using a couple of them.

Because Micro is all about microservices development, we’ve decomposed the blog API into posts, comments and tags. Right now we’ll focus on posts and tags. You can find the code in https://github.com/micro/services/tree/master/blog.

Deploying these is super simple.

# run the posts service
micro run github.com/micro/services/blogs/posts

# run the tags service
micro run github.com/micro/services/blogs/tags

Check they’re running using micro status. You should see the status progress through starting, building and running. If you want to see logs or anything related just do micro logs posts and the same for any other service by name.

Write a post on the CLI

Once services are running they become immediately callable via the CLI as dynamic commands.

Save a quick post:

micro posts save --id=1 --title="My first post" --content="This is pretty epic"

List posts:

micro posts query

The same calls can be made over the API too, just have to know your namespace:

Call it via the HTTP API

Now here’s where it gets cool and more importantly what you’ll be calling from your frontend apps running on Netlify. First grab your namespace like earlier.

$ micro user namespace
random-example-namespace

Now just curl it like any other api

$ curl -H "Micro-Namespace: random-example-namespace" https://api.m3o.dev/posts/query
{
  "posts": [
    {
      "id": "1",
      "title": "My first post",
      "slug": "my-first-post",
      "content": "This is pretty epic"
    }
}

The generic api.m3o.dev url requires us to pass in our namespace so we query our own service but every namespace also gets its own unique URL so you don’t have to worry about this in your frontend code. Just compose namespace + m3o.dev as random-example-namespace.m3o.dev.

$ curl https://random-example-namespace.m3o.dev/posts/query
{
  "posts": [
    {
      "id": "1",
      "title": "My first post",
      "slug": "my-first-post",
      "content": "This is pretty epic"
    }
}

That’s it! We now have the backend for our frontend running on M3O.

Let’s deploy the sample frontend to Netlify just for kicks.

Deploying the frontend to Netlify

The frontend is a simple angular app we’ve put together to validate the premise:

Netlify for the frontend, Micro for the backend

You can find the code in github.com/m3o/blog-frontend but we’ll walk you through the install now. The deploy settings for the site hosted under loving-goodall-44ee08.netlify.app are as follows:

Build settings

Repository        github.com/m3o/blog-frontend
Base directory    Not set
Build command     sed -i 's/micro/concert-celtic-uncover/g' ./src/environments/environment.prod.ts && ng build --prod && cp ./src/assets/_redirects ./dist/blog-frontend
Publish directory dist/blog-frontend

As you can see, it’s the original m3o/blog-frontend being deployed in the example, but in your case m3o will be replaced with your fork. This is because Netlify asks for the permissions to the repo.

The build command is a bit involved, here is what it’s doing:

# Replace the micro namespace with your own
namespace=$(micro user namespace)

sed -i "s/micro/$namespace/g" ./src/environments/environment.prod.ts

# It's an angular app, so we have to ng build
ng build --prod

# Single page applications need a redirect file
cp ./src/assets/_redirects ./dist/blog-frontend

After that is done and it builds successfully, your web app should be live!

Don’t forget to add posts from your terminal.

Create a new post

# Add a post
micro posts save --id=1 --title="My first post" --content="This is pretty epic"

# query posts
micro posts query

Now hit the frontend on Netlify and check it out. You should see your post immediately show up.

What’s the frontend doing

The frontend we’re running on Netlify is basically using Micro as the backend and M3O provides the hosted APIs for your posts service. We’re using the url api.m3o.dev and passing the namespace with the Micro-Namespace header but you can equally use unique API urls that are $namespace.m3o.dev.

Each service you deploy resolves to a path e.g the ‘posts’ service is api.m3o.dev/posts and their methods follow on from that so Posts.Query on the backend is api.m3o.dev/posts/query. This provides automatic dynamic mapping of Go based gRPC services on the backend to HTTP APIs for the frontend.

Here’s the example code in typescript we use to construct the calls

export class M3oService {
  public address: string = environment.m3oAddress;
  public namespace: string = environment.m3oNamespace;

  constructor(private http: HttpClient) { }

  get(service: string, endpoint: string, params: HttpParams): Promise<Object> {
    return this.http.get(this.address + "/" + service + "/" + endpoint, {
      headers: {
        "Micro-Namespace": [this.namespace]
      },
      params: params,
    }).toPromise()
  }
}

And here’s us listing those posts on the frontend

  ngOnInit(): void {
    this.m3o.get("posts", "query", null).then(v => {
      this.posts = v["posts"]
    })
  }

Micro is Netlify for the backend

It’s really clear to us that there’s this huge pain for people trying to consume APIs as we move into this new rearchitected world. Too often people are asking “Where do I write or host my APIs”, they are asking Where’s the Netlify for the backend. We think M3O and Micro are that solution.

It’s not enough to just consume existing APIs in the ecosystem, you want to build your own, but you want to do it without having to standup layers of infrastructure on AWS or be beholden to the legacy players like Heroku or other providers who don’t get that you want the same Netlify like experience on the backend.

Hopefully you’re feeling like this makes sense and if you do please try out M3O and come join the Slack to chat with us. Write, run and consume all free, for personal use, with friends or your team. Hack on side projects, build APIs to scale and either use it as the backend for your frontend or build the next Twilio or Stripe, all on M3O with Micro.