OFReport.com

Our family blog, documenting our work in Ukraine

Overview

OFReport.com is a Vue.js application built with Nuxt.js, and is deployed as a pre-generated static site on Netlify. In addition to Vue and Nuxt, several noteworthy supporting technologies have been used, including the following:

• Tailwind CSS (v1)
• markdown-it
• frontmatter-markdown-loader
• Cloudinary
• Vuelidate
• vuejs-paginate

Requirements

• Node >= 14.x
• Yarn 1.x

Setup

To get started, clone/fork the repo, cd into it, and install the dependencies.

$ yarn install

Pagination depends on the presence of the PER_PAGE environment variable, so make sure this is set on your system. One easy way to handle this is with a local .env file in the root of the project:

$ echo "PER_PAGE=8" >> .env

Development

Nuxt uses Webpack as its build tool, and is also pre-configured for hot module replacement. To begin, start the development server on localhost:3000:

$ yarn dev

Static Build

In addition to deploying server-rendered apps, Nuxt also works great as a static site generator. That's how we're using it here. To pre-render the entire site as static HTML, CSS, and JavaScript files, run this command:

$ yarn generate

Local HTTP Server

Sometimes in development it can be helpful to run the statically generated site with a local web server, simulating a production environment. I have found http-server to be a great choice. Here's how I build and serve the static site on my local machine.

First, install http-server globally if you don't already have it.

$ npm install -g http-server

Next, build the site as explained in the previous section.

$ yarn generate

Finally, serve the site from the dist/ folder.

$ http-server dist/ -p 8080

Visit http://localhost:8080 and check out the site!

The generated site will be output to the dist/ folder.

Deployment

My preferred deployment solution for static sites is Netlify. It's super cheap FREE, and provides lots of nice extras like a CDN with Netlify Edge and a free SSL certificate. The Nuxt docs provide a brief guide to deployment with Netlify.

For more information on deployment solutions for Nuxt, visit their FAQ page.

Webpack Bundle Analyzer

Nuxt provides a nice cli interface to analyze the size of webpack output files. Run the following command to generate an interactive zoomable treemap.

$ yarn build --analyze

Output at .nuxt/stats/client.html:

Code Style, Linting and Formatting

Project-specific JavaScript conforms to the Airbnb code style.

JS linting is done with ESLint and extended with eslint-plugin-vue and eslint-config-airbnb-base.

Code formatting is done with Prettier.

I use Neovim as my editor along with the coc.nvim plugin for code completion and asynchronous linting.

Legal

Copyright © 2003–2021 Joshua and Kelsie Steele. Software is licensed under MIT.