Browse Source

BrowserSync added to the Webpack nonsense

Webpack and dev server plugin configs to use BrowserSync as the "Hot
Module Replacement" client, which enables updating content in the
browser as it changes in the development environment.
develop
Rob Colbert 2 years ago
parent
commit
9bfad3f64c
  1. 35
      game/js/game-app.js
  2. 3
      game/less/lib/variables.less
  3. 14
      game/views/layout.pug
  4. 36
      nice-harness.js
  5. 2
      package.json
  6. 27
      webpack.config.js
  7. 909
      yarn.lock

35
game/js/game-app.js

@ -197,25 +197,22 @@ export default class GameApp extends NiceGame {
}
spawnRandomEnemy ( ) {
const count = NiceMath.randomRangeInt(1, 3);
for (let i = 0; i < count; ++i) {
switch (NiceMath.randomRangeInt(1, 4)) {
case 1:
this.enemies.spawnBeardson();
break;
case 2:
this.enemies.spawnGroyper();
break;
case 3:
this.enemies.spawnTorba();
break;
case 4:
this.enemies.spawnFuentesFagFace();
break;
}
switch (NiceMath.randomRangeInt(1, 4)) {
case 1:
this.enemies.spawnBeardson();
break;
case 2:
this.enemies.spawnGroyper();
break;
case 3:
this.enemies.spawnTorba();
break;
case 4:
this.enemies.spawnFuentesFagFace();
break;
}
}

3
game/less/lib/variables.less

@ -13,6 +13,9 @@
@background-color : #1a1a1a;
@text-color : #e8e8e8;
// @background-color : #fafafa;
// @text-color : #1a1a1a;
@default-margin : 30px;
/*

14
game/views/layout.pug

@ -1,11 +1,17 @@
<!DOCTYPE html>
doctype html
html(lang="en")
head
meta(charset="utf-8")
meta(name="viewport" content="width=device-width, initial-scale=1")
meta(charset="UTF-8")
meta(http-equiv="X-UA-Compatible", content="IE=edge")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
title CyberEgg 2077
link(rel="stylesheet", href="/dist/game-app.css")
link(rel="icon", type="image/x-icon", href="/dist/assets/icon/favicon.ico")
body
.navbar
@ -17,4 +23,4 @@ html(lang="en")
block game-view
script(src=`${gameModuleUrl}?v=${pkg.version}`, type="module")
script(async, src=`${gameModuleUrl}?v=${pkg.version}`, type="module")

36
nice-harness.js

@ -23,7 +23,6 @@ import webpack from 'webpack';
import webpackDevMiddleware from 'webpack-dev-middleware';
import WEBPACK_CONFIG from './webpack.config.js';
const compiler = webpack(WEBPACK_CONFIG);
import express from 'express';
@ -50,19 +49,40 @@ async function getHomeView (req, res) {
harness.app.set('view engine', 'pug');
harness.app.set('views', path.join(__dirname, 'game', 'views'));
// expose ./game/assets locally as /dist/assets
harness.app.use('/dist/assets', express.static(path.join(__dirname, 'game', 'assets')));
/*
* Nice Game SDK static asset routes are served directly from the
* ./game/assets directory in dev mode.
*/
// expose the local ./platform as /platform to fill in for static assets
// commonly provided by the Nice Arcade platform (shell).
harness.app.use('/dist/assets', express.static(path.join(__dirname, 'game', 'assets')));
harness.app.use('/platform', express.static(path.join(__dirname, 'platform')));
// let Webpack provide /dist with live updates
harness.app.use(webpackDevMiddleware(compiler, { publicPath: '/dist' }));
/*
* Webpack integration
*/
// provide the "home" page to serve out the game
harness.compiler = webpack(WEBPACK_CONFIG);
/*
* Webpack dev server middleware
*/
harness.webpackDevMiddleware = webpackDevMiddleware(harness.compiler, {
publicPath: WEBPACK_CONFIG.output.publicPath,
});
harness.app.use(harness.webpackDevMiddleware);
/*
* This is not a complex web app, it's a dev harness that runs a packaged
* application in the browser with live updates. The intent is to provide a
* development harness in which Nice Game SDK games and other apps can be
* built. All this "app" does is serve out the SDK app as if it is being
* loaded in Nice Arcade.
*/
harness.app.get('/', getHomeView);
/*
* Start the ExpressJS server
*/
const port = parseInt(process.env.ARCADE_HTTP_PORT || '3000', 10);
const host = process.env.ARCADE_HTTP_BIND || '127.0.0.1';
console.log('Starting game server harness', { host, port });

2
package.json

@ -25,6 +25,8 @@
"pug": "^3.0.2"
},
"devDependencies": {
"browser-sync": "^2.27.9",
"browser-sync-webpack-plugin": "^2.3.0",
"css-loader": "^6.7.1",
"jshint": "^2.13.4",
"less": "^4.1.2",

27
webpack.config.js

@ -9,6 +9,7 @@ import { fileURLToPath } from 'url';
const __dirname = dirname(fileURLToPath(import.meta.url)); // jshint ignore:line
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import BrowserSyncPlugin from 'browser-sync-webpack-plugin';
const webpackMode = (process.env.NODE_ENV === 'production') ? 'production' : 'development';
console.log('Webpack mode:', webpackMode);
@ -31,6 +32,32 @@ export default {
},
plugins: [
new MiniCssExtractPlugin(),
new BrowserSyncPlugin(
{
proxy: {
target: 'http://localhost:3000',
ws: true,
},
host: 'localhost',
open: 'local',
port: 3333,
cors: true,
ui: {
port: 3400,
},
notify: false,
ghostMode: {
clicks: false,
forms: false,
scroll: true,
},
logLevel: 'info',
files: [
'./dist/*.js',
'./dist/*.css',
],
},
),
],
module: {
rules: [

909
yarn.lock

File diff suppressed because it is too large
Loading…
Cancel
Save