Go beyound static on Netlify

https://netlify-meetup-tokyo.connpass.com/event/100705/

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

Transcript

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

   View Slide

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

   View Slide

3. Netlify
   

   View Slide

4. What do you feel good
   points of Netlify?
   

   View Slide

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
   

   View Slide

6. Integrate your project's
   repository
   

   View Slide

7. Netlify is not only for static sites
   

   View Slide

8. Demo
   Admin page for our product
   

   View Slide

9. Demo application's raugh image of
   architecture
   

   View Slide

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

    View Slide

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)
    

    View Slide

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

    View Slide

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%
    

    View Slide

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
    

    View Slide

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:///.netlify/identity",
    audience: "",
    setCookie: false
    });
    auth.signup(email, password);
    

    View Slide

16. Set roles to user metadata
    Web Interface
    

    View Slide

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; }
    };
    

    View Slide

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.
    

    View Slide

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' })
    }
    }
    //...
    

    View Slide

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" }
    

    View Slide

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 127.0.0.1: GET /test
    Response with status 200 in 4 ms.
    

    View Slide

22. Conclusion
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

27. Thank you for your
    attention!
    

    View Slide