rolele / lwjgl3-www

The LWJGL 3 website.

LWJGL.org - The home of Lightweight Java Game Library 3

The website for LWJGL 3.

Dependencies

Static assets are loaded from LWJGL's CDN ( AWS CloudFront ).

We use Google Analytics for tracking.

Build status icons are loaded directly from travis-ci.org.

Other LWJGL subdomains:

• The website for LWJGL 2 can be found here. A static copy of the old LWJGL website is now hosted directly from S3
• The blog is Ghost.
• The forum is SMF.
• The wiki for LWJGL 2 was MediaWiki. A static copy of the old LWJGL wiki is now hosted directly from S3.

Production Requirements

• Node.js
• Yarn
• PM2 or forever

Development Prerequisites

• Yarn
• Nodemon

npm -g i nodemon yarn

App Configuration

Place a JSON file in the root directory named config.json with the following contents. Additional settings are automatically populated when the project is built for production.

{
  "port": 8080,
  "hostname": "www.lwjgl.org",
  "analytics_tracking_id": "UA-XXXXXXX-X",
  "aws": {
    "accessKeyId": "",
    "secretAccessKey": "",
    "region": "us-east-1"
  }
}

AWS credentials are only needed for deploying compiled files to S3 (@see yarn deploy)

Development

Build/running in development

1. To install all required npm packages:

yarn

2. To build vendor file(s) for development run:

yarn vendor
yarn styles

3. To start the server in dev mode:

node server
# or
yarn start

For watching and auto-reloading the server we use nodemon.

Monitor for /server changes and auto-restart with:

yarn watch

CLI flags

--nohmr => Disables Hot Module Reloading (HMR) --async => Enables async routes --nocache => Disables Pug view caching (for testing production) --pretty => Pretty prints HTML (for testing production) --s3proxy => Proxies S3 images (for testing production) --css => Enables CSS modules in development mode (for SCSS HMR) --sourcemap => Enables inline source-maps

Flag usage example:

node server --css
node server --async --nohmr
yarn watch -- --async --nohmr

Production

The website is served via Amazon CloudFront using the server's hostname & port as origin. SSL Termination happens on the CDN (using a certificate issued by AWS Certificate Manager).

The production process involves the following steps:

• Compile core SCSS files with webpack (sass-loader -> postcss-loader -> css-loader -> ExtractTextPlugin)
• Compile JS files with webpack (babel) and store the manifest on disk
• Process the manifest:
  • Read the webpack manifest and compile list of files & routes
  • Process each file with uglify-js
  • Compute hashes of final files
  • Store each production file on disk
  • Generate production manifest that also needs to be shipped
  • Generate & print file size report

Build for production

git pull
yarn
yarn release

To run the production build (*nix only)

NODE_ENV=production node server

you can simulate and run the production build locally:

# will use production assets on disk
yarn test-production
# will download production assets from S3, only proxies request that pass through Cloudfront
yarn run-production

Run in production with PM2

cd /path/to/lwjgl3-www
NODE_ENV=production pm2 start server/index.js --name lwjgl
pm2 save

or place a process.json file anywhere with the following contents:

{
  apps: [
    {
      name: "lwjgl-site",
      cwd: "/path/to/lwjgl3-www",
      script: "./server/index.js",
      env: {
        "NODE_ENV": "production",
      }
    }
  ]
}

and then run:

pm2 start process.json --only lwjgl-site
pm2 save

Run in production with forever

Place a JSON file named forever.json in the root folder with the following contents:

{
    "uid": "lwjgl",
    "append": true,
    "watch": false,
    "script": "server",
    "sourceDir": "/path/to/lwjgl3-www",
    "args": ["--production"],
    "command": "node"
}

and then run:

forever start forever.json

IDE Setup

We recommend Visual Studio Code with the following plugins:

• flow-for-vscode
• Prettier

Other useful plugins:

• npm Intellisense
• SCSS IntelliSense

We also recommend enabling auto-save onWindowChange for faster HMR (simply Alt/Cmd+Tab). In VS Code add the following in the user settings:

{
  "files.autoSave": "onWindowChange"
}

Recommended VS Code Workspace Settings:

{
  "editor.formatOnSave": true,
  "files.exclude": {
    "**/.vscode": true,
    "**/.history": true,
    "**/.cache-loader": true,
    "**/public/js/*.js*": true,
    "**/public/css/*.css*": true
  },
  "files.associations": {
    "*.mjs": "javascript",
    "**/client/**/*.jsx": "javascriptreact"
  },
  "javascript.format.enable": false,
  "javascript.nameSuggestions": false,
  "javascript.referencesCodeLens.enabled": false,
  "javascript.validate.enable": false
}