Nuxt + Netlify + Contentful Demo

• Nuxt
  • "The Vue.js Framework"
• Netlify
  • "Build, deploy, and manage modern web projects"
  • "Static without limits"
• Contentful
  • "Manage content better with infrastructure"
  • "The cure for the common CMS"

1. Setup Nuxt
   • Install nuxt
   • Add dev script
   • Create pages and setup links
   • Create nav component
     • Demo <script> and <style>
     • Create links manually in template
     • Add links prop with default
     • Demo v-for and v-text bind directives
   • Demo Vue dev tools
   • Create default layout
     • Add some padding
   • Demo universal mode with SSR
   • Add build and start scripts
   • Demo build --analyse
   • Demo SPA mode
     • CLI --spa flag
     • nuxt.config.js
   • Install normalize.css and add global styles
     • html font-size, font-family
   • Demo generate static site
   • Install serve and create respective script
   • Revert to universal mode (remove mode from config)
   • Configure generate subFolders
   • Demo --modern=client
   • Nuxt is very versatile!
2. Deploy to Netlify
   • Drag and drop
   • Review site with network tools
     • HTTPS + HTTP2 by default
   • Change site name
   • Make some obvious changes
     • html min-height, background-color
     • Demo <style> in nav component
     • Switch to SASS
     • Install (node-sass, sass-loader)
   • Drag and drop again
   • Preview previous deploy
   • Rollback version
3. Version control integration
   • Create .gitignore and git init
   • Push project to GitHub
   • Link GitHub repo to Netlify
   • Configure command and publish in Netlify UI
   • Review live deploy logs (CD first run)
   • Make another change in master
     • Add broken link to nav
     • Push to GitHub
   • Review deploys
   • Navigate to broken link
   • Create a new branch feat/error-page
     • Create error layout
     • Create blank layout
   • Push to GitHub
4. Continuous deployment
   • Review deploys (no deployment for feature branch)
   • Create pull request
   • Review deploys
   • Demo Netlify integration in PR
     • Click broken link—works
     • Refresh: page not found
     • Config generate.fallback: true
   • Merge into master
   • Review deploys
   • Setup branch deploys
   • Create another branch
   • Make obvious change (background-color)
   • Push to GitHub
   • Review deploys
5. Split testing
   • Start split test + refresh
   • Netlify build node env vars + Google Analytics (BRANCH)
   • Stop split test + refresh
6. Setup Contentful
   • Create a space (NCC)
   • Create a content model (film)
     • Name (required)
     • Slug (required, unique)
     • Cover (required, image)
     • Release Date (required, format)
     • Rating (min, max, appearance)
7. Author some content
   • Create a few entries
   • Review media tab
   • Publish a couple of entries
8. Integrate Contentful
   • Install contentful SDK
   • Create CMS plugin
   • Create API key and copy
     • Space ID
     • CDA token
     • CPA token
   • Render entries on list page
   • Demo preview API
   • Demo Image API (w, h, fit, format)
   • Create dynamic page
   • Generate static site...no film pages
   • Setup generate routes in Nuxt config (fallback, subFolders)
   • Setup asyncData payload
9. Setup webhooks
   • Netlify > Settings > Build & deploy > Build hooks (master)
   • Contentful ?trigger_title=Deploy+triggered+by+Contentful
   • Edit and save some published content
   • Review Netlify deploys
   • Create preview branch
   • Create netlify.toml
     • build settings
     • Branch env vars