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

Static Sites with GatsbyJS, React.js & Firebase

Static Sites with GatsbyJS, React.js & Firebase

Meetup #4 - GDG Divinópolis - Brasil

Vinícius Soares

August 11, 2018
Tweet

More Decks by Vinícius Soares

Other Decks in Programming

Transcript

  1. GDG Divinópolis O Google Developers Group Divinópolis, tem como objetivo

    reunir pessoas com interesse em tecnologias da Google e trocar conhecimentos através de encontros, reuniões e eventos. Além de servir como ponte entre empreendedores e desenvolvedores.
  2. Gatsby lets you build blazing-fast sites with your data, whatever

    the source. Liberate your sites from legacy CMSs and fly into the future. (https://next.gatsbyjs.org/) GatsbyJS
  3. React.js React’s component architecture simplifies building large websites by encouraging

    modularity, reusability, and clear abstractions. React has a large ecosystem of open source components, tutorials, and tooling that can be used seamlessly for building sites with Gatsby. Gatsby is built to behave almost exactly like a normal React application. (https://www.gatsbyjs.org/docs/building-with-components/)
  4. GraphQL GraphQL is a query language for APIs and a

    runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.
  5. Served over a secure connection Firebase Hosting Fast content delivery

    SSD-backed hosting, around the globe Deploy / Rollback with one command Fast and secure static hosting for your web app.
  6. 3 Steps Implementation Install the Firebase CLI > npm install

    -g firebase-tools 1 2 Set up a project directory > firebase login | firebase init 3 Deploy your site > firebase deploy
  7. Further Reading... Gatsby Docs: https://www.gatsbyjs.org/docs/ React.js Docs: https://reactjs.org/docs/getting-started.html GraphQL Docs:

    https://graphql.org/ Firebase Docs: https://firebase.google.com/docs/ Demo: https://github.com/gdgdivi/demo-gatsbyjs-talk Slides: https://bit.ly/2KKguaL