|
1 | 1 | # nuxt-netlify-lambda-starter |
2 | 2 |
|
3 | | -This is a basic starter project for a prerendered [Vue](https://vuejs.org/) + [Nuxt](https://nuxtjs.org/) frontend with a [Netlify lambda function](https://www.netlify.com/docs/functions/) backend. |
| 3 | +:hammer_and_wrench: SEO-friendly website starter backed by Netlify lambda functions in a simple, friendly repo |
4 | 4 |
|
5 | | -##### [You can view the deployed app here](https://nuxt-netlify-lambda-starter.netlify.com/) |
| 5 | +This is a basic starter project for a prerendered [Vue.js](https://vuejs.org/) + [Nuxt.js](https://nuxtjs.org/) frontend with a [Netlify lambda function](https://www.netlify.com/docs/functions/) backend. The Nuxt.js app is pre-rendered for improved SEO. |
6 | 6 |
|
7 | | -The Vue app is prerendered for improved SEO - you can learn more about server-side rendering and prerendering with Vue [here](https://ssr.vuejs.org/#ssr-vs-prerendering). |
| 7 | +### [You can view the deployed app here](https://nuxt-netlify-lambda-starter.netlify.com/) |
| 8 | + |
| 9 | +#### Features |
| 10 | +- Home and About Pages |
| 11 | +- `HelloWorld` example Lambda function with associated frontend code |
| 12 | +- Pre-rendered dynamic pages using a sample `Item` datatype |
| 13 | +- Integrates with [HotJar](https://hotjar.com"), [Mailchimp](https://mailchimp.com"), and [Google Analytics](https://analytics.google.com/analytics/web/#/) |
| 14 | +- Includes [JSON-LD Structured Data](https://developers.google.com/search/docs/guides/intro-structured-data) |
8 | 15 |
|
9 | 16 | **NOTE:** this project can only be deployed via Netlify with [continuous deployment](https://www.netlify.com/docs/continuous-deployment/) enabled. |
10 | 17 |
|
11 | | -## Build Setup |
| 18 | +#### Build Setup |
12 | 19 |
|
13 | 20 | ``` bash |
14 | | -# install dependencies |
| 21 | +# Install dependencies |
15 | 22 | $ yarn install |
16 | 23 |
|
17 | | -# serve with hot reload at localhost:3000 |
18 | | -# serves netlify-lambda functions |
| 24 | +# Serve with hot reload at localhost:3000 and serves Netlify Functions |
19 | 25 | $ yarn run dev |
20 | 26 |
|
21 | | -# build for production and launch server |
| 27 | +# Build for production |
22 | 28 | $ yarn run build |
23 | | -$ yarn start |
| 29 | +``` |
| 30 | + |
| 31 | +#### Environment Configuration |
| 32 | +The following production environment variables are required for the respective plugins to work correctly: |
| 33 | + |
| 34 | +```bash |
| 35 | +# Google Analytics Tracking Code |
| 36 | +GA_TRACKING_ID=UA-XXX-X |
24 | 37 |
|
25 | | -# generate static project |
26 | | -$ yarn run generate |
| 38 | +# HotJar Site Identifier |
| 39 | +HOTJAR_SITE_ID=1234567 |
| 40 | + |
| 41 | +# Mailchimp Script Variables |
| 42 | +MAILCHIMP_BASE_URL=mc.us19.list-manage.com |
| 43 | +MAILCHIMP_LID=abcde12345 |
| 44 | +MAILCHIMP_UUID=aabbccddeeffgghhiijj12345 |
27 | 45 | ``` |
28 | 46 |
|
29 | | -For detailed explanation on how things work, checkout [Nuxt.js docs](https://nuxtjs.org). |
| 47 | +These variables can be configured in a variety of ways - please consult the [Netlify Continuous Deployment Docs](https://www.netlify.com/docs/continuous-deployment/#environment-variables). You can deactivate any of these plugins by modifying the `plugins` field in the `nuxt.config.js` file. |
| 48 | + |
| 49 | +#### JSON-LD Structured Data |
| 50 | + |
| 51 | +The [JSON-LD Structured Data](https://developers.google.com/search/docs/guides/intro-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. |
30 | 52 |
|
31 | | -Includes Nuxt `README.md` files for context |
| 53 | +#### References |
| 54 | +- [Vue.js](https://vuejs.org) |
| 55 | +- [Nuxt.js](https://nuxtjs.org) |
| 56 | +- [Netlify Functions](https://www.netlify.com/docs/functions/) |
| 57 | +- [Bootstrap-Vue](https://bootstrap-vue.js.org/) |
| 58 | +- [Bootstrap Components](https://getbootstrap.com/docs/4.3/components/alerts/) |
| 59 | +- [FontAwesome Vue](https://github.com/FortAwesome/vue-fontawesome) |
| 60 | +- [`netlify.toml` Docs](https://www.netlify.com/docs/netlify-toml-reference/) |
0 commit comments