Go beyound static on Netlify 2018/09/26 Nelify Tokyo @joe_re

Who am I? twitter: @joe_re github: @joe­re ClassDo Inc CTO community: Nishinippori.rb, GraphQL Tokyo Organizer

Netlify

What do you feel good points of Netlify?

You don't need to call infra engineers for hosting your website. Easy to setup your project's deploy and CI (just takes few clicks!) Automatic https Easy to set custom domain

Integrate your project's repository

Netlify is not only for static sites

Demo Admin page for our product

Demo application's raugh image of architecture

We use Netlify functions like a BFF https://docs.microsoft.com/en­ us/azure/architecture/patterns/backends­for­frontends

Lumbda functions on Netlify You can deploy Lambda functions without your AWS account You don't need to setup to publish endpoint (it'll be enable to handle request automatically via API gateway)

Setup functions Web Interface or Netlify.toml [build] functions = "./functions"

Functions example project_root/functions/hello.js exports.handler = function(event, context, callback) { callback(null, { statusCode: 200, body: "Hello, World" }); } $ curl http://localhost:8080/.netlify/functions/hello Hello, World%

Netlify Identify You can manage and authenticate users on Netlify Context You can use this just click enable button (you don't need to create a database, deploy other modules or others..) Based on JWT

Authentication by Netlify Identify Netlify Identity widget https://github.com/netlify/netlify­identity­widget Lower level client libraly https://github.com/netlify/gotrue­js import GoTrue from "gotrue-js"; auth = new GoTrue({ APIUrl: "https:///.netlify/identity", audience: "", setCookie: false }); auth.signup(email, password);

Set roles to user metadata Web Interface

Set roles to user metadata On Functions(by admin methods) exports.handler = async (event, context) => { const { identity, user } = context.clientContext; const userID = user.sub; const userUrl = `${identity.url}/admin/users/${userID}`; const adminAuthHeader = "Bearer " + identity.token; try { return fetch(userUrl, { method: "PUT", headers: { Authorization: adminAuthHeader }, body: JSON.stringify({ app_metadata: { roles: ["superstar"] } }) }) .then(response => { return response.json(); }) .then(data => { console.log("Updated a user! 204!"); console.log(JSON.stringify({ data })); return { statusCode: 204 }; }) .catch(e => return {...}); } catch (e) { return e; } };

Identity and Functions export function(event, context, callback) { const {identity, user} = context.clientContext; // Do stuff... } context.clientContext includes identify and user property. Identify has information to request admin methods. User has information of authenticated user.

Example: Check user role in your functions const allowRoles = ['superstar'] if (!allowRoles.some(role => context.clientContext.user.app_metadata.roles.includes(role))) { callback(null, { statusCode: 401, body: JSON.stringify({ message: 'Not authorized' }) } } //...

You can set different environments each stages netlify.toml # Production context [context.production] environment = { ACCESS_TOKEN = "super secret", NODE_ENV = "8.0.1" } # Deploy Preview context [context.deploy-preview.environment] environment = { ACCESS_TOKEN: "not so secret" } # Specific branch context [context.staging] # 'staging' is a branch name environment = { ACCESS_TOKEN: "stg secret" }

Local Development netlify­lambda https://github.com/netlify/netlify­lambda read netlify.toml and build or launce server for functions $ npx netlify-lambda serve functions Starting server Function source and publish folder should be in different locations Lambda server is listening on 9000 Request from 127.0.0.1: GET /test Response with status 200 in 4 ms.

Conclusion

Today I took about Netlify features for Go beyound static on Netlify.

What do you think the best point of Netlify Go beyound static stacks are?

I think the best point is you can create and maintain that by only frontend enginners contexts.

We can provide our product quickly without any long way thanks to Netlify stacks

Thank you for your attention!