Forem: Jason

Universal Apps on Serverless ? Yes.

Jason — Wed, 08 Jul 2020 12:55:54 +0000

Introduction

The serverless architecture might be one of the most trending tech paradigms nowadays.
It has been popularized by AWS with its “AWS Lambda platform” and powers millions of APIs worldwide.

We have been using it at Monisnap for the past year on our micro-services architecture and it has been a blast !
Now, imagine if you could also power your front end apps ( mostly Universal Apps ) with a serverless architecture ?
Sounds great, right ?

Why serverless ?

You might ask, “Why would I want to do that ? I could just use a static assets provider like Netlify or a good ol’ server running on a vm on the cloud ! ”.

Yes you could but there are a few drawbacks :

A static assets provider is very useful when you have only a few pages to serve ( or do not care about SEO and just use SPAs ) but imagine if you have millions of generated pages, it is just not imaginable to generate all of them before deployment.
Running on a server works and has been proven to be quite effective in the past ( and still is to some extent ) but we can do differently now and particularly way cheaper :).

The serverless paradigm gives us a lot of pros but also cons. I’m not gonna get into details about them as it is not the subject of this article but here is a pretty good overview by Cloudflare.

You can use any Front-end framework ( or an homemade one ) as long as it allows some kind of programmatic function to be plugged into a node framework / server ( e.g Express ).

You also need your serverless provider to support returning binary types ( as we will be returning html, js , css, etc.. files.

At Monisnap we use NuxtJS, the Serverless framework and AWS lambda as our serverless provider.

This is what we're going to cover today :)

Getting Started

( I’m gonna assume you have at least NodeJS installed :) )

First we will need some dependencies to make it work on a serverless environments :

npm install -S serverless-http express serverless-apigw-binary

Now we are going to init a new NuxtJS project ( Choose the options that suit your needs when asked ) :

npx create-nuxt-app hello-world

Now cd into the directory :

cd hello-world

And then start the project :

npm run dev

You should see this if you go to http://localhost:3000/ on your web browser :)

The 'Server' code

Now to make it runnable on our “custom” server, we are going to create a folder “server” at the root of the project and create a new file “index.js” inside it.

index.js

The configuration is pretty straightforward.

We first import the required dependencies :

const path = require("path");
const { loadNuxt } = require("nuxt");
const serverless = require("serverless-http");
const express = require("express");

Then we init the express app :

const app = express();

Next we have the module.exports.nuxt which export the "handler" function that is going to be used by serverless.

Inside this export we have the first app.use which links the static assets from the directory where the assets are built to the /_nuxt/ path ( this is the default path where Nuxt looks for the assets ) :

app.use("/_nuxt", express.static(path.join(__dirname, ".nuxt", "dist", "client")));

We then get the Nuxt instance ( start indicates that we want to use the production package ) :

const nuxt = await loadNuxt("start");

And we tell express to use it for every routes via the nuxt.render method which allows us to render each route based on our routes params, pretty useful.

app.use(nuxt.render);

In the last part we use the serverless-http package which will wrap our Express app to be understandable by Lambda. We also need to pass some configuration options to allow any content-type we wish to serve with our application :

return serverless(app, {
   binary: [
     'application/javascript',
     'application/json',
     'application/octet-stream',
     'application/xml',
     'font/eot',
     'font/opentype',
     'font/otf',
     'image/jpeg',
     'image/png',
     'image/svg+xml',
     'text/comma-separated-values',
     'text/css',
     'text/html',
     'text/javascript',
     'text/plain',
     'text/text',
     'text/xml',
     'font/woff',
     'font/woff2'
   ]
 })(request, context)
}

And this is it for the server code ! ( pretty easy right ? :))

The Serverless part

Now let’s focus on the Serverless part.
Create a the root of the directory a file named serverless.yml.

serverless.yml

This is a pretty basic Serverless configuration :

First we define the service name ( used by lambda and API Gateway ) :

service: hello-world

Then we have the provider specific configurations :

The provider name ( AWS in our case ),
The nodejs runtime we want our code to run on
The AWS lambda region where our lambdas will we provided

provider:
  name: aws
  runtime: nodejs12.x
  region: eu-west-1

We then have a custom variable set called apigwBinary which will be used by the plugin serverless-apigw-binary to let API Gateway know that we want to support binaries as responses.

custom:
  apigwBinary:
    types:
      - "*/*"

The next block define our function and the associated http events, we set two event, one will be handling all the requests from the root path and the other any additional path we want to support.

functions:
  nuxt:
    handler: server/index.nuxt
    memorySize: 512
    events:
      - http:
          path: /
          method: any
      - http:
          path: /{proxy+}
          method: any

And finally we tell Serverless we want to use the serverless-apigw-binary plugin :)

plugins:
 - serverless-apigw-binary

Before deploying the app, you need to have an account ( you can create one for free here) and set up the AWS cli tool ( you can use the free tier with lambdas )

Once you’ve configured the cli tool, you are ready to build and deploy the app :

npm run build && sls deploy

And you can now hit the url shown in the console output and you should see your Nuxt app appearing :)

https://<api-gateway-id>.execute-api.<region>.amazonaws.com/dev/

There is a little caveat though... If you check your web browser console you should see a lot of console errors related to the loading of resources.
Nuxt tries to load them from the /_nuxt/ path but API gateway exposes the lambda with a “stage” prefix ( e.g dev ), so obviously it does not find them.

To effectively fix this problem, you need to add a custom domain name to API gateway ( You will need a domain name and a tls certificate ) which will allow you to serve the app from the root of your domain.

Conclusion

Serverless allows us to compile and serve our Nuxt application at a very low cost and with no worries about scalability ( among other benefits ).
Of course it comes with some drawbacks which can easily be overcome.

Drop a comment if this has been useful or if you have any questions :)

Have a good one !

5 min TypeScript NPM package

Jason — Fri, 14 Feb 2020 15:40:41 +0000

Introduction

As developers we might want to create a new framework or package reusables components, functions, etc...
Hopefully as JavaScript developers we have a NPM !

We may be also using TypeScript to add a layer of safety on top of Javascript plus a more advanced OOP design

So what about we create a NPM package which will be available to
JavaScript projects but most importantly Typescript projects ?

Let's go and let's see how we do it at Monisnap !

Getting Started

( I assume you have NodeJS and Typescript installed )

First create a new folder and open a terminal tab and type :

npm init -y

This will basically initialize your npm package by creating a package.json with some default options ( we will get back to that later )

and

tsc --init

This also initialize the project to use TypeScript by creating a tsconfig.json which holds important options defining how your TypeScript code will be handled.

So now you should have this :

Good ? next !

Now we can write some code :)

Create a "src" folder and two files inside it "index.ts" and "unicorn.ts" ( yes I like unicorns )

unicorn.ts

export class Unicorn {
  public sayHelloTo(name: string): string {
    return `🦄 Hello ${name} !`;
  }
}

index.ts

export * from "./unicorn";

We now need to edit the tsconfig.json ( copy / paste the following )

{
  "compilerOptions": {
    "declaration": true,
    "strictNullChecks": true,
    "target": "es5", 
    "outDir": "dist",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "lib": ["es2015", "dom"],
    "rootDir": "src"
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

let's cover the important options :

declaration: It tells typescript to generate the typings ( important if we want some "automatic" docs for our code
target: specify the ES target version ( I chose ES5 here because I target nodeJS )
outDir: The compiled files destination
module / module resolution: I use commonJS / nodeJS as its the module system on NodeJS
sourceMap: Important if you want the source map to be able to debug Typescript code directly
rootDir: The root folder where our code is.

Now we can edit the package.json :

{
  "name": "unicorn-says-hello-world",
  "version": "1.0.0",
  "description": "A unicorn that says hello world",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "files": [
    "dist"
  ],
  "scripts": {
    "build": "tsc",
    "prepare": "npm run build"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/monisnap-jason/unicorn-says-hello-world.git"
  },
  "keywords": [],
  "author": "monisnap-jason",
  "license": "ISC"
}

Again the important options:

name: the name of your package on NPM
main: the entry point ( our code will be compiled in the dist folder )
types: the path of our code typings
files: The files we want to include in our package
scripts:
- build: tsc to compile our code
- prepare: this is a NPM hook which executes a command before publishing to npm ( we tell it the execute the build command above )
repository: the options about the repository which holds the package code

We also need a .gitignore file ( as we don't want to include some folders into our repository ):

\dist
\node_modules

And lastly you can create README.md to tell the world how to use your package.

We're almost done !

Now the final touch :

npm publish

you should see this in your terminal output :
"+ your-package-name@1.0.0"

And voilà your package is on NPM
here is mine for reference unicorn-says-hello-world

Now if I want to use my brand new package I just to need npm install unicorn-says-hello-world in a new or existing project, and I can use it like that :

Drop a comment below if you have any questions !

Have a good one :)