Target : 'node'

Been trying to add express to then add socketio but running into something, apparently I need to set target to node inside a webpack.config.js and it kind of is not registering when I do so. I read that this would enable the server side of services that node can run. If I try to include express all the fs and net packages start throwing and make the compilation unsuccessful. Maybe there’s some other place in the openfl yo structure that ‘node’ can be set as target ?

It looks like that’s the place to do it

https://webpack.js.org/concepts/targets/

Are you doing it in the webpack.common.js file?

Tried adding " target: ‘node’, " to the module.exports entry but no go, still throwing in compile.

Okay, here’s how I got it to work :slight_smile:

1.) Create a new project

mkdir NodeServerTest
cd NodeServerTest
yo openfl

2.) Install Express

npm install express --save

3.) Edit “package.json” and replace the “start” scripts with the following:

"start": "npm run build:dev && cd dist && node app.js"

4a.) If you are using TypeScript or ES6, edit your “app.ts” or “app.js” to like the following:

import * as express from "express";
import Point from "openfl/geom/Point";

var app = express();
app.get('/', function (req, res) {
  var point = new Point ();
  res.send('Hello World! ' + point);
});
app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});

4b.) If you are using ES5 JavaScript, it would look more like this:

var express = require ("express");
var Point = require ("openfl/geom/Point");

var app = express();
app.get('/', function (req, res) {
  var point = new Point ();
  res.send('Hello World! ' + point);
});
app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});

It’s basic, but this sample should show running a Node.js Express server, while also mixing some OpenFL functionality (Point) in the server. I’m not sure what OpenFL classes can be imported and used on Node.js (since there is no window) but this should be a starting point :wink:

1 Like

Throws almost exactly like the test I was trying before, maybe because I’m on different versions of things, I’m on node v8.9.4 and npm 5.6.0

What errors do you get? Did you npm install express? What language are you using?

I runned the exact order twice thinking I messed up the first time, using es6, will paste the log:

WARNING in ./node_modules/express/lib/view.js
81:13-25 Critical dependency: the request of a dependency is an expression
@ ./node_modules/express/lib/view.js
@ ./node_modules/express/lib/application.js
@ ./node_modules/express/lib/express.js
@ ./node_modules/express/index.js
@ ./src/app.js

ERROR in ./node_modules/destroy/index.js
Module not found: Error: Can’t resolve ‘fs’ in ‘D:\WORK\yoprojects\NodeTestServer\node_modules\destroy’
@ ./node_modules/destroy/index.js 14:17-30
@ ./node_modules/send/index.js
@ ./node_modules/express/lib/response.js
@ ./node_modules/express/lib/express.js
@ ./node_modules/express/index.js
@ ./src/app.js

ERROR in ./node_modules/etag/index.js
Module not found: Error: Can’t resolve ‘fs’ in ‘D:\WORK\yoprojects\NodeTestServer\node_modules\etag’
@ ./node_modules/etag/index.js 22:12-25
@ ./node_modules/express/lib/utils.js
@ ./node_modules/express/lib/application.js
@ ./node_modules/express/lib/express.js
@ ./node_modules/express/index.js
@ ./src/app.js

ERROR in ./node_modules/express/lib/view.js
Module not found: Error: Can’t resolve ‘fs’ in ‘D:\WORK\yoprojects\NodeTestServer\node_modules\express\lib’
@ ./node_modules/express/lib/view.js 18:9-22
@ ./node_modules/express/lib/application.js
@ ./node_modules/express/lib/express.js
@ ./node_modules/express/index.js
@ ./src/app.js

ERROR in ./node_modules/mime/mime.js
Module not found: Error: Can’t resolve ‘fs’ in ‘D:\WORK\yoprojects\NodeTestServer\node_modules\mime’
@ ./node_modules/mime/mime.js 2:9-22
@ ./node_modules/send/index.js
@ ./node_modules/express/lib/response.js
@ ./node_modules/express/lib/express.js
@ ./node_modules/express/index.js
@ ./src/app.js

ERROR in ./node_modules/send/index.js
Module not found: Error: Can’t resolve ‘fs’ in ‘D:\WORK\yoprojects\NodeTestServer\node_modules\send’
@ ./node_modules/send/index.js 23:9-22
@ ./node_modules/express/lib/response.js
@ ./node_modules/express/lib/express.js
@ ./node_modules/express/index.js
@ ./src/app.js

ERROR in ./node_modules/express/lib/request.js
Module not found: Error: Can’t resolve ‘net’ in ‘D:\WORK\yoprojects\NodeTestServer\node_modules\express\lib’
@ ./node_modules/express/lib/request.js 18:11-25
@ ./node_modules/express/lib/express.js
@ ./node_modules/express/index.js
@ ./src/app.js
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build:dev: webpack --config webpack.dev.js
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build:dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\xxxxx\AppData\Roaming\npm-cache_logs\2018-01-11T20_49_32_321Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] start: npm run build:dev && cd dist && node app.js
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\xxxxx\AppData\Roaming\npm-cache_logs\2018-01-11T20_49_32_352Z-debug.log

Edit 1: Looks like it is complaining about the start script ?

This is working in TypeScript:

import * as express from "express";
import * as fs from "fs";
import * as net from "net";
import Point from "openfl/geom/Point";

var app = express();
app.get('/', function (req, res) {
  var point = new Point ();
  res.send('Hello World! ' + point + "<br>File size: " + fs.statSync ("app.js").size);
});
app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});

…though I had to install npm install "@types/node" --save-dev to get compiling to work.

I’ll try in ES6, but it should be the same

Okay, this works for ES6. The missing component was that our ES6 template uses Babel, to transpile ES6 to ES5, but this could likely be removed if you are only targeting Node. Nevertheless, here’s how I got it working :slight_smile:

Create new project

mkdir ES6-NodeServerTest
cd ES6-NodeServerTest
yo openfl

Install Express

npm install express --save

Change start script in package.json

"start": "npm run build:dev && cd dist && node app.js"

Update .babelrc

{
	"presets": [
		["env", {
		"targets": {
			"node": "current"
		}
		}]
	],
	"plugins": ["transform-class-properties"]
}

Update webpack.common.js

const path = require ('path');

module.exports = {
	entry: "./src/app.js",
	target: "node",
	output: {
		path: path.resolve (__dirname, "dist"),
		filename: "app.js"
	},
	resolve: {
		alias: {
			"openfl": path.resolve (__dirname, "node_modules/openfl/lib/openfl")
		}
	},
	module: {
		rules: [
			{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
		]
	}
};

Update src/app.js

import express from "express";
import fs from "fs";
import net from "net";
import Point from "openfl/geom/Point";

var app = express();
app.get('/', function (req, res) {
  var point = new Point ();
  res.send('Hello World! ' + point + "<br>File size: " + fs.statSync ("app.js").size);
});
app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});

Start

npm start -s

OK, that compiles with warning:
WARNING in ./node_modules/express/lib/view.js
81:13-25 Critical dependency: the request of a dependency is an expression
@ ./node_modules/express/lib/view.js
@ ./node_modules/express/lib/application.js
@ ./node_modules/express/lib/express.js
@ ./node_modules/express/index.js
@ ./src/app.js
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src/app.js
webpack: Compiled with warnings.

and then nothing.
It starts the browser pointing to localhost:8080 nothing happening om port 3000 either.
Throws “ReferenceError: require is not defined” and it is pointing to module.exports = require(“url”); in the depths of code turmoil land.
I’ll try and set this up through TS instead. Wish me luck…

Don’t forget to replace the start script, we don’t want to start the Webpack dev server (I’m not sure that’s compatible with Node?) but instead use the script I shared

1 Like

That was it!!! :smiley: :smiley: :smiley:

1 Like