static-website-by-cdnjs

Vue/Nuxt website.

Getting Started

This project runs on Node.js. Please make sure you have a version installed that matches our defined requirement in the .nvmrc file for this project.

Included with this project is a dependency lock file. This is used to ensure that all installations of the project are using the same version of dependencies for consistency.

You can install the Node dependencies following this lock file by running:

npm ci

Once the dependencies are installed, the website is ready to run in development mode. To start Nuxt in development mode (without a custom server), run:

npm run dev

Development in Windows

Before running npm run dev, add a global npm package to resolve the 'NODE_ENV' is not recognized as an internal or external command issue:

npm install -g win-node-env

Analyzing Bundle

The website is build using Nuxt and relies on Webpack to generate the client-side bundle used to render the site and provide interactivity. Due to this, we can use Webpack's analyzer to better understand what is contributing to the size of the final bundle.

To run the analyzer, use the following package script:

npm run dev:analyze

Environment Variables

Site Base

When working with the site in development, using npm run dev or npm run dev:analyze, the SITE_HOST environment variable will be automatically set to be http://localhost:3000/, as this is where the site is made accessible by the dev script.

When deploying this site to production using the npm run build and npm run start scripts, the SITE_HOST environment variable must be set and should be the canonical base for where the site will be hosted. In production for us, this is set to https://cdnjs.com/.

Sitemap generation

To enable sitemap generation for the site, NODE_ENV must be set to production. This will enable the initial sitemap generation during build as well as the background task for regenerating the sitemap during npm run start, every 30 minutes.

Further, by having NODE_ENV=production, this will also tell the robots.txt generation script, referenced above, to include a rule pointing to the sitemap index file, based on the provided SITE_HOST env var.

(Note that for npm run dev:analyze, npm run build & npm run start, NODE_ENV will be automatically set to production).

Production Deployment

To deploy this website to production, the following steps should be taken:

• Install dependencies with npm ci
• Build the site for production with npm run build
• Start the custom Express server with npm run start

For deployments to Heroku, the installation of dependencies and building the app will automatically be done, with npm run start being defined in the Procfile.

To change the port that the app binds to, set the PORT environment var when running the script. For our Heroku deployment, this is set automatically by Heroku.

The custom Express server is used to handle our sitemaps, as we have too many routes for Nuxt's sitemap offering to handle reliably. During the build step (npm run build) initial sitemaps will be generated. The Express server will then regenerate these every 30 minutes using the cdnjs API. A log containing the outcome of the last generation in Express is available at /sitemap-log.txt on the website.

Linting

Our full set of tests for linting can be run at any time with:

npm test

Included in this repository are an eslint config file as well as a sass-lint config file to help with ensuring a consistent style in the codebase for the JS/Vue and SCSS used in the app.

To help enforce this, we use both eslint and sass-lint in our testing. To run eslint at any time, which checks the code style of any JavaScript and Vue files, you can use:

npm run test:eslint

eslint also provides automatic fixing capabilities, these can be run against the codebase with:

npm run test:eslint:fix

Similarly, sass-lint can be run at any time to check the quality of all the SCSS files used in the app, by running:

npm run test:scss

A secondary package, sass-lint-auto-fix, is available to help with automatically fixing some of the errors raised by sass-lint, which can be run with:

npm run test:scss:fix

Like with npm test, which runs both eslint & sass-lint, a shorter package script is available to automatically attempt to fix issues from both linting packages, which can be used by running:

npm run test:fix

from https://github.com/cdnjs/static-website