Build a Blog in 15 (more like 30) Minutes: Webpacker Edition

An ode to DHH's classic, let's build a blog with a Rails backend using a graphQL API and a React frontend. Through this live-coding session, you will learn how to set up an isomorphic app, the basic concepts of each library, and at the end have a fully functioning blog application! Follow along on your computer or clone the repo.

https://github.com/sassygrody/Blogger-RailsConf

Transcript

1. Build a Blog in 15 (more like 30) Minutes: Webpacker Edition SashaGrodzins
2. Build a Blog in 15 (more like 30) Minutes | @sassygrody | @devmyndsoftware | github/sassygrody/Blogger-RailsConf Sasha Grodzins Chicago Dev Bootcamp DevMynd Software @sassygrody
3. Build a Blog in 15 (more like 30) Minutes: Webpacker Edition (+ graphQL) Build a Blog in 15 (more like 30) Minutes | @sassygrody | @devmyndsoftware | /bitly/sassy-blog
4. Build a Blog in 15 (more like 30) Minutes | @sassygrody | @devmyndsoftware | github/sassygrody/Blogger-RailsConf What’s with the title? • An ode to DHH's presentation of the same name! • Created a blog with posts, comments, pagination, tests • Great tutorial / reference
5. Build a Blog in 15 (more like 30) Minutes | @sassygrody | @devmyndsoftware | github/sassygrody/Blogger-RailsConf What is this talk? • Build a blog! • React frontend + GraphQL backend • Isomorphic Rails application • www.github.com/sassygrody/rails-conf-blog
6. Build a Blog in 15 (more like 30) Minutes | @sassygrody | @devmyndsoftware | github/sassygrody/Blogger-RailsConf Welcome, Webpack! • Back in the day… • Rails + Webpacker :hearts_for_eyes:
7. Build a Blog in 15 (more like 30) Minutes | @sassygrody | @devmyndsoftware | github/sassygrody/Blogger-RailsConf What is React? "Javascript library to build user interfaces.” — the docs
8. Build a Blog in 15 (more like 30) Minutes | @sassygrody | @devmyndsoftware | github/sassygrody/Blogger-RailsConf What is GraphQL? "A query language for your API” — the docs
9. Build a Blog in 15 (more like 30) Minutes | @sassygrody | @devmyndsoftware | github/sassygrody/Blogger-RailsConf Single Endpoint REST API
10. Build a Blog in 15 (more like 30) Minutes | @sassygrody | @devmyndsoftware | github/sassygrody/Blogger-RailsConf POST /graphql REST API Graph API a GraphQL query —> Single Endpoint
11. Build a Blog in 15 (more like 30) Minutes | @sassygrody | @devmyndsoftware | github/sassygrody/Blogger-RailsConf GraphQL::Types GraphQL::Mutations Types: correspond to pieces of data in the backend Mutations: specify which parts of the data in Types can be modified
12. Build a Blog in 15 (more like 30) Minutes | @sassygrody | @devmyndsoftware | github/sassygrody/Blogger-RailsConf Setup •$ rails new Blogger —webpack=react • gem “graphql” + bundle •$ rails g graphql:install •$ rails g model Post title content • seeded data • added file app/views/application/index.html.erb and root route
13. Build a Blog in 15 (more like 30) Minutes | @sassygrody | @devmyndsoftware | github/sassygrody/Blogger-RailsConf Let’s go!