paint-brush
Nuxt.js Website Boilerplateby@tonyspiro
3,331 reads
3,331 reads

Nuxt.js Website Boilerplate

by Tony SpiroMarch 27th, 2018
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

Nuxt.js and Cosmic JS are built on Nuxt.js to build a website that is responsive down to mobile w/ Bootstrap frontend frontend. The website is fully responsive and searchable down-to-mobile. The contact form uses mailgun to send an email to your email(s) of choice and to Cosmic JS for easy reference. Sign up for Cosmic JS to install the demo content and deploy this website. You must set the environment variable HOST to 0.0.0.

Company Mentioned

Mention Thumbnail
featured image - Nuxt.js Website Boilerplate
Tony Spiro HackerNoon profile picture

Check out this website boilerplate built on Nuxt.js and Cosmic JS. It satisfies some common website requirements including dynamic pages, blog articles, author management, SEO ability, contact form and website search.

TL;DR


Download the GitHub repoCheck out the demo.

Features





1. Fully responsive down to mobile w/ Bootstrap frontend2. SEO ready3. A contact form that sends an email to your email(s) of choice and to Cosmic JS for easy reference4. Full-site search functionality5. All content is easily managed in Cosmic JS including pages, blog and contact info. Sign up for Cosmic JS to install the demo content and deploy this website.

Get started



git clone https://github.com/cosmicjs/nuxtjs-website-boilerplatecd nuxtjs-website-boilerplatenpm install

Import the bucket.json file into your Cosmic JS bucket. To do this go to Your Bucket > Settings > Import / Export Data.

Run in production

COSMIC_BUCKET=your-bucket-slug npm start

Go to http://localhost:3000

Run in development

Create a config/development.js file and match it to config/production.js with your values.

npm run development

Go to http://localhost:5000.

Env vars

As it states on the Nuxt.js website, you will need to set the environment variable HOST to 0.0.0.0. This is already done in the package.json script for you, but you could also set this on the “Set Environment Variables” section located in Your Bucket > Settings > Deploy Web App.

Config

Because Node.js doesn’t have a mail server, the contact form uses mailgun to send the email. So add the following constants in the config file.