About Timeline
Bailey Matthews

Bailey Matthews

I'm a junior full-stack developer based in Tamworth, currently working for Expert Trades.

This post is hidden. Please take note of the link if you want to view it again.

Published Nov 15, 2019 - 9 mins read

Hello, this document contains reasoning as to why your documentation may be miss-leading and questions about the current and future deployment process and how the built project is then served.

So, firstly, I was under the impression, from reading https://www.jexia.com/en/docs/application-hosting that I could host a NodeJS project, as long as it met the requirements of the 256MB of RAM and the NodeJS version of 12.10. This doesn’t seem to be the case as the only thing I seem capable of hosting is a static /dist folder.

From my understanding of testing, the process of deployment is as follows:

  1. Fetch GitHub repo
  2. Run npm run build , this is hopefully a build command that looks something like: vue-cli-service build 1, if this command is as so vue-cli-service build --dest dashboard , changing the output folder from /dist to /dashboard the deployment process fails.
  3. Then, run http-server ./dist -p 80 server side and not the projects npm start command.

This 3rd point is what strikes me as confusing as, according to your documentation, you say you run the npm run start command to serve the NodeJS project:

As you can see in our example we use next to the start script: “start”: “HTTP-server ./dist -p 80”. We use HTTP-server to organize serving for static file. Here we listen to port 80 and use the dist folder, which contains our release. More options can be found on the HTTP-server package page. Feel free to implement the approach that suits you. All you need to remember is to use PORT:80 for your server.

And this relates to the package.json file shown before hand:

{
	"name" : "My mega app",
	"version" : "0.1.0",
	"scripts" : {
		"build" : "vue-cli-service build",
		"start" : "http-server ./dist -p 80"
	},
	"dependencies" : {
		"http-server" : "^0.11.1",
		"jexia-sdk-js" : "^4.1.0",
		"vue" : "^2.6.10",
		...
	},
	"devDependencies" : {
		...
	}
}

A breakdown of your documentation and what it means, or at least how I interpret it as is:

As you can see in our example we use next to the start script: “start”: “HTTP-server ./dist -p 80”.

This is what you use to start the script, hinting that you recommend the HTTP-server module to start our projects. This is also emphasised below as you give details about the module and how we can customize our project to run on your server using this command:

We use HTTP-server to organize serving for static file. Here we listen to port 80 and use the dist folder, which contains our release. More options can be found on the HTTP-server package page. Feel free to implement the approach that suits you. All you need to remember is to use PORT:80 for your server.

Therefore, as I have read your documentation and now looked at your examples listed on https://www.jexia.com/en/examples/ I see this repo: https://github.com/jexia/pollapp with a package.json as:

{
	"name":"pollapp",
	"version":"0.1.0",
	"private":true,
	"scripts":{
		"start":"node index.js",
		"build":"echo built"
	},
	"dependencies":{
		"body-parser":"^1.19.0",
		"cors":"^2.8.5",
		"express":"^4.17.1",
		"jexia-sdk-js":"^4.2.3",
		"node-fetch":"^2.6.0",
		"ws":"^7.2.0"
	}
}

Notice how this repo’s start command is node index.js , much like my attempted start of node server.js 2, which doesn’t seem to be called on deployment, and with no correlation to the HTTP-server module mentioned within the documentation over on https://www.jexia.com/en/docs/application-hosting. Seeing this within the package.json file, I proceeded to fork this repo and attempt to host it on my Jexia project. It took about 3 minutes to deploy, which is reasonable, and gave the impression it worked.

When looking through https://github.com/BaileyJM02/pollapp/blob/master/index.js, there is not any middleware I can see being passed to the express module and request assignment functions therefore it confuses me greatly as to why this works and my project doesn’t. As I’m currently using a simple boilerplate project that does work on my local system but not your live deployment.

Differences?

The main difference between my application and Pollapp is that my package.json looks as follows:

{
	"name":"hue-analytics",
	"version":"0.2.0",
	"private":true,
	"main":"server.js",
	"scripts":{
		"start":"node server.js",
		"serve":"vue-cli-service serve",
		"build":"vue-cli-service build --dest dashboard",
		"lint":"vue-cli-service lint"
	},
	"dependencies":{
		"connect-history-api-fallback":"^1.6.0",
		"core-js":"^3.6",
		"eslint-loader":"^3.0",
		"express":"^4.17.1",
		"express-ping":"^1.4.0",
		"flatted":"^2.0.1",
		"lodash":"^4.17.15",
		"node-sass":"^4.13",
		"sass-loader":"^8.0",
		"vue":"^2.6",
		"vue-router":"^3.1"
	},
	"devDependencies":{
		...
	},
	"eslintConfig":{
		...
	},
	"postcss":{
		...
	},
	"browserslist":[
		...
	]
}

Compared to that of Pollapp’s:

{
	"name":"pollapp",
	"version":"0.1.0",
	"private":true,
	"scripts":{
		"start":"node index.js",
		"build":"echo built"
	},
	"dependencies":{
		"body-parser":"^1.19.0",
		"cors":"^2.8.5",
		"express":"^4.17.1",
		"jexia-sdk-js":"^4.2.3",
		"node-fetch":"^2.6.0",
		"ws":"^7.2.0"
	}
}

As you can see, my build script builds the VueJS project into a folder named dashboard and then my start script simply calls my server.js file. The same start process as Pollapp. My dashboard folder is then called via my server.js file:

const express = require('express');
const serveStatic = require('serve-static');
const history = require('connect-history-api-fallback');
const health = require('express-ping');

let app = express();

// Set API before displaying vue application
// anything beginning with "/api" will go into this
app.use('/api', require('./api'));
app.use(health.ping('/api/v1/ping'));

// Link vue application
app.use(history());
app.use(serveStatic(__dirname + '/dashboard'));

const port = process.env.PORT || 8080; // set as `80` on deployment
const host = process.env.HOST || 'localhost'; // set as `0.0.0.0` on deployment

app.listen(port, host);

As you can see, I statically serve my built dashboard and also, before hand, require my API so it can be called as <domain>/api/... this, does not work. The project fails to build.

It’s important to note that when my build command was vue-cli-service build --dest dist , Jexia deployed my Vue application correctly, but failed to correctly call my start command: node server.js and I suspect it was just using HTTP-server to serve my dist folder.

This leads me to think the deployment process is:

  1. Fetch GitHub repo
  2. Run npm run build 1. If build command creates a dist folder -> run a HTTP-serve command. 2. If there is no dist folder created, and “built” is returned, run the npm run start project command.

This means, as my project first builds the Vue project then runs a file for logic, your system is seeing that static files have been built in /dist and just running a static file serve command.

The Future?

My question regarding the future and your goal of releasing Go deployments in Q4 is: Will we be able to deploy our application in a container-like environment or will it be a strictly event driven code architecture?

    • -

1 This is my npm build command, from my personal repo

2 This is my npm start command, from my personal repo


© 2020 Bailey Matthews