nuxt-netlify-lambda-starter

🛠️ SEO-friendly website starter backed by Netlify lambda functions in a simple, friendly repo

This is a basic starter project for a prerendered Vue.js + Nuxt.js frontend with a Netlify lambda function backend. The Nuxt.js app is pre-rendered for improved SEO.

You can view the deployed app here

Features

• Home, About, and 404 Pages
• HelloWorld example Lambda function with associated frontend code
• Pre-rendered dynamic pages using a sample Item datatype
• Integrates with HotJar, Mailchimp, and Google Analytics
• Includes JSON-LD Structured Data for outstanding SEO
• Pre-configured with OpenGraph and Twitter Cards meta tags for beautiful unfurls when sharing on social media
• Customizable UI using Bootstrap & SASS variables

NOTE: this project can only be deployed via Netlify with continuous deployment enabled.

Build Setup

# Install dependencies
$ yarn install

# Serve with hot reload at localhost:3000 and serves Netlify Functions
$ yarn run dev

# Build for production
$ yarn run build

Note that Prettier will automatically clean up your code when you save. You can adjust this behavior in the build section at line 127 in nuxt.config.js.

Pre-rendered Dynamic Pages

This project includes a series of pre-rendered pages using a generic Item datatype. The data for these pages is maintained in assets/content/items.json and they're generated with a custom generate field in nuxt.config.js:

generate: {
  routes: items.map(g => '/items/' + g.id)
}

This ensures that each item has a page that's pre-renderd and SEO-optimized. You can clone, modify, or remove the Item datatype and associated pages to better suit your needs.

Environment Configuration

The following production environment variables are required for the respective plugins to work correctly:

# Google Analytics Tracking Code
GA_TRACKING_ID=UA-XXX-X

# HotJar Site Identifier
HOTJAR_SITE_ID=1234567

# Mailchimp Script Variables
MAILCHIMP_BASE_URL=mc.us19.list-manage.com
MAILCHIMP_LID=abcde12345
MAILCHIMP_UUID=aabbccddeeffgghhiijj12345

These variables can be configured in a variety of ways - please consult the Netlify Continuous Deployment Docs. You can deactivate any of these plugins by modifying the plugins field in the nuxt.config.js file.

JSON-LD Structured Data

The JSON-LD Structured Data can be updated by modifying the jsonld() function in the layouts/default.vue file. This feature shouldn't be used anywhere else - one JSON-LD snippet should describe the entire site.

OpenGraph and Twitter Card Meta Tags

The <meta> tags for OpenGraph and Twitter Cards are located in the head section of nuxt.config.js. You should change these from their default values. You can validate your changes using the Twitter Card Validator and the Facebook Sharing Debugger.

Bootstrap + SASS Configuration

You can modify the assets/sass/main.sass file to optionally include Bootstrap component styles as-needed. PROTIP - only include the Bootstrap components your app depends on - this will keep your CSS bundle nice and slim :)

You can also modify any of Bootstrap's SASS Variables inside the assets/sass/variables.sass file to customize the framework to your liking.

FontAwesome Vue Configuration

The repo includes a minimal subset of icons by default. When you need an additional icon, you must import it directly in plugins/fontawesome.js and register it with the FontAwesome plugin. You can learn more about the Vue-FontAwesome library here.

References

• Vue.js
• Nuxt.js
• Netlify Functions
• Bootstrap-Vue
• Bootstrap Components
• FontAwesome Vue
• netlify.toml Docs