CPNT 200 Day 1 - JAMstack and Nuxt Intro

Prep

• Read Through What is a JAMStack
• Skim through this indepth article on JAMStack
• Watch State of JAMstack Nation - Sarah Drasner
• Watch until 6:07 NuxtJS Content

Assignment 1: Nuxt Frontend Setup

• Due November 22th 11:59pm
• Set up a nuxtjs page
• Remove boiler plate
• Add modules
• Create a header, footer, and nav component

Topics

• LAMPStack vs JAMStack
• Intro to Nuxt
• Nuxt Configuration

LAMP Stack vs JAMStack

• LAMP Stack stands for:
  • Linux Apache MySQL and PHP
    • Linux = Operating System
    • Apache = Web Server
    • MySQL = Database
    • PHP = Programming Language
  • The LAMP stack is a mature, stable, and powerful stack to use for websites.
  • LAMP Stacks are Server Side Rendered (SSR)
• JAM Stack stands for:
  • Javascript API Markup
    • Javascript = Dynamic programming, ran on client
    • API = Server-side functions and database actions. Served using a CDN
    • Markup = Content (templates etc) built before build time in the browser. Static Site Generators are used for this.
  • Many site builders used to make JAMStack sites can create SSR, SSG, and PWA (Progressive Web Apps)

JAMStack and Headless CMS

JAMStack is quickly becoming a favourite for developers. You have a lot of options to configure a stack that works with you and your clients.

You can choose between different frontend frameworks such as:

• React
  • Gatsby (One of the most popular site builders around)
  • NextJS (Next and Nuxt are very similar, just one is react and the other is vue)
• Vue
  • Gridsome
  • Nuxt
• Svelte
  • Sveltekit
• Ruby
  • Jekyll
• Go
  • Hugo

Intro to Nuxt

• NuxtJS is a frontend framework that uses VueJS
• It can be used to create:
  • Server Side Rendered (SSR) Pages
    • backend server sends data to frontend page (traditional page)
  • Static Site Generation (SSG)
    • Web page content is built and then hosted statically
  • Progressive Web Apps
    • A client side rendered web application
• Nuxt 2, Nuxt Bridge, Nuxt 3
  • Nuxt 2: stable version
  • Nuxt Bridge: adds some features from Nuxt 3 to Nuxt 2
  • Nuxt 3: Currently in Public Beta Version
• We will use Nuxt 2 as there are more available resources

NuxtJS Resources

• Offical Docs
• Tutorials
• Traversy Video note that this tutorial is focused on SSR

Nuxt Setup

• Use the create nuxt-app command as noted on the documentation
  • npm, npx, and yarn are all good options
  • Create Nuxt App Docs
• Going through the prompt:
  • Make sure to press space to select options
  • Follow Ash's guide
  • If you use Nuxt with Strapi, select axios instead of content during setup

Nuxt Tour Gists

• Nuxt Project Structure
• Nuxt Navigation
• Nuxt Pages

Important Modules

• Nuxt Content (selected during setup, but can also install after)
  • Handles the CMS stuff
  • install with `npm install -D @nuxt/content
• Nuxt Images (must add to project)
  • Automatic and easy optimization of images
  • install with `npm install -D @nuxt/image
    • Then add to buildModules
• Nuxt Router (built in)
  • NuxtLink makes site navigation easy

Activity - Install and explore nuxt

• Install
• Run dev
• Look at the pages and components files
• Try adding content in any of the template tags
  • In vue, you can write plain html in the template tags

nuxt.config.js

• This is where you will set up your modules and a lot of your defaults
• Review the documentation
• check that components: true, if it is set to false, you will have to manually import components
• you can set default image sizes if you are using @nuxt/image in here
• you can import sass/scss into here as well.
• If you are using an external stylesheet, decalre it in this file (see docs)

Activity: Nuxt Config File

• Read through the docs and edit your config file
• Install the @nuxt/image module
  • Add it to the configuration
• Install the @nuxtjs/dotenv module
  • Add it to the configuration

Lab Time

• Work on Assignment 2