Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Go beyound static on Netlify

B72422afc5f3ffc844f672b59122e16d?s=47 joe_re
September 26, 2018

Go beyound static on Netlify


- How do you go beyound static on Netlify.
- Introduce Netlify stacks.
- What are good points on Netlify stacks.



September 26, 2018


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

  2. Who am I? twitter: @joe_re github: @joe­re ClassDo Inc CTO

    community: Nishinippori.rb, GraphQL Tokyo Organizer
  3. Netlify

  4. What do you feel good points of Netlify?

  5. 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
  6. Integrate your project's repository

  7. Netlify is not only for static sites

  8. Demo Admin page for our product

  9. Demo application's raugh image of architecture

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

  11. 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)
  12. Setup functions Web Interface or Netlify.toml [build] functions = "./functions"

  13. 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%
  14. 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
  15. 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://<your domain name>/.netlify/identity", audience: "", setCookie: false }); auth.signup(email, password);
  16. Set roles to user metadata Web Interface

  17. 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; } };
  18. 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.
  19. 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' }) } } //...
  20. 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" }
  21. 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 GET /test Response with status 200 in 4 ms.
  22. Conclusion

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

    on Netlify.
  24. What do you think the best point of Netlify Go

    beyound static stacks are?
  25. I think the best point is you can create and

    maintain that by only frontend enginners contexts.
  26. We can provide our product quickly without any long way

    thanks to Netlify stacks
  27. Thank you for your attention!