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

Go beyound static on Netlify

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. Who am I? twitter: @joe_re github: @joe­re ClassDo Inc CTO

    community: Nishinippori.rb, GraphQL Tokyo Organizer
  2. 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
  3. 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)
  4. 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%
  5. 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
  6. 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);
  7. 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; } };
  8. 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.
  9. 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' }) } } //...
  10. 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" }
  11. 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.
  12. I think the best point is you can create and

    maintain that by only frontend enginners contexts.