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
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 127.0.0.1: 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!