Files don't compress when run nodejs app in IBM cloud foundry - node.js

So I have simple express app. When it run locally, I can see js, css files got gzip compressed but when I deploy to cloud foundry, those files not compressed. The files size still the same.
Anyone know the reason, how to fix it or solutions for this issue ?
const express = require('express');
const compression = require('compression');
const app = express();
app.use(compression());
app.use(express.static('./public'));
Package.json
{
"name": "conversation-simple",
"description": "A simple Node.js based web app which shows how to use the Conversation API to recognize user intents.",
"version": "0.1.1",
"main": "server.js",
"scripts": {
"start": "node server.js"
},
"dependencies": {
"#google/chatbase": "^1.1.2",
"body-parser": "^1.18.2",
"botbuilder": "^3.15.0",
"cloudant": "^1.10.0-NOTICE",
"compression": "^1.7.3",
"cors": "^2.8.4",
"dotenv": "^2.0.0",
"express": "^4.16.1",
"gulp-rename": "^1.4.0",
"moment": "^2.22.2",
"nano": "^6.4.4",
"request": "^2.87.0",
"slick-carousel": "^1.8.1",
"underscore": "^1.9.0",
"universal-analytics": "^0.4.16",
"watson-developer-cloud": "^3.5.3",
"xml-js": "^1.6.3"
},
"engines": {
"node": "8.15.x"
}
}
Update:
Look like there is location problem. When it's deployed to Sydney, the compression doesn't work but Dallas is ok. IBM support have confirmed the issue in my ticket and currently investigate.

I have the same issue, I feel like I've tried absolutely everything so far:
Static Gzipping (serving .gz files)
Brotli (no dice)
Dynamic compression (like you)
Redirect to static .gz files
It works locally as it should but once deployed - farting noise nothing.
I have a feeling it happens in the proxy and needs to be enabled somewhere, where is not documented though
Commenting here to follow this, also I've contacted their support, if I get any answers I will put them here :)

This issue was fixed by IBM.
"After investigation, we found an issue that strips the header and decompresses the response in the Cloud Foundry Platform AU-SYD region."

Related

how to start node js project in a EC2 AWS instance

I am completely new to node js , I am trying to set it up in EC2 AWS.I tried using the command "npm start" but nothing has happened
below is my package.json
{
"name": "sample",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"cookie-parser": "~1.4.4",
"debug": "~2.6.9",
"ejs": "~2.6.1",
"express": "~4.16.1",
"http-errors": "~1.6.3",
"morgan": "~1.9.1",
"pm2": "^5.1.2"
}
}bouldercef$ npm start
after running npm start the below lines appear ,but not able to see the site
boulder#0.0.0 start /home/ubuntu/bouldercef
node ./bin/www
If your site is running properly in your machine, and if you have node/npm installed in your EC2 instance and you are not receiving any errors, looks like your project is running without issues.
So the problem can be that you are not connect to your site using HTTP.
Take a look on the security group attached with your instance to check if you allow users to connect on HTTP (80) or HTTPS (443).
To more information of how to make these ports available for your users check How do I allow my users to connect on HTTP (80) or HTTPS (443)?

IBM Cloud with Cloud Foundry: node-gzip does not compress a buffer

I'm trying to compress a buffer, and it works fine on my local machine, but when I upload the service to Cloud Foundry on IBM Cloud, it doesn't work (no errors in logs). Sample code is here:
const {gzip} = require('node-gzip')
gzip(buf)
.then((compressed) => {
logger.debug('buffer has been compressed')
})
Here is package.json:
"dependencies": {
"bluemix-autoscaling-agent": "1.0.14",
"cfenv": "1.1.0",
"cors": "2.8.5",
"express": "4.16.4",
"lodash": "4.17.11",
"node-gzip": "1.1.2",
"object-path": "0.11.4",
"path": "0.12.7"
}
Cloud Foundry service LOG_LEVEL=debug so I can see logs output for other part of my code.
Do you know any other alternative to node-gzip to compress/decompress a buffer? ZLIB is too old - last updated 7 years ago. We don't want to use it as a matter of code integrity and security.

Using a specific Node.js version in Gandi Simple Hosting

basically, I am Using Gandi Simple Hosting for a Node.js application. I would like to use a specific Node.js version. I'm ready that all I had to do was making a ".nvmrc" file and putting the required version number in it.
Now my .nvmrc file looks like this.
6.11.0
And my package.json file is like this.
{
"name": "name-of-my-app",
"version": "0.3.0",
"dependencies": {
"express": "3.x",
"socket.io": "1.x",
"mysql": "2.x",
"ejs": "2.x",
"emailjs": "1.x",
"svg-captcha": "1.x",
"sitemap": "1.x",
"discord.js": "11.x"
},
"scripts": {
"start": "node server.js"
}
}
When I restart my server, the console says the following.
/srv/data/web/vhosts/default /srv/data/web/vhosts/default
N/A: version "N/A" is not yet installed.
You need to run "nvm install N/A" to install it before using it.
Despite looking at the Gandi documentation, I can't find out what is wrong.
Thanks you in advance for your help! :-)
Noël.
I got an answer from the Gandi Technical Assistance.
I was told to deploy my code using Git. I made it work by following these inscructions: https://wiki.gandi.net/en/simple/git.

live reload not working for live-server# 0.9.2

For my web application I am using "live-server": "^0.9.2", here's the package json file,
{
"name": "demoapp",
"version": "1.0.0",
"description": "This project contains the samples of the book",
"scripts": {
"live": "live-server",
"start": "npm run live"
},
"dependencies": {
"angular": "^1.5.0",
"angular-messages": "^1.5.0",
"angular-route": "^1.5.0",
"bootstrap": "^3.3.6",
"jquery": "^2.2.0"
},
"devDependencies": {
"live-server": "^0.9.2"
}
}
When I am executing command "npm start", live server starts and web page starts # http://127.0.0.1:8080/
Now, whenever I am changing content for html/css, change detection is not happening and browser content is also not refreshed.
What could be the reason for it? how to resolve it. Thanks!!!
According to the github readme doc, the extension works best if it can find html files which are served by default on the web browser. It may detect changes in the local files that you edit, but rendering them to the browser depends on whether you are editing an html file or not. There has to be a hack for it to work, just not found one yet

How to integrate foundation for apps into an existing Express framework

OK, I'm fairly new to all this front end programming and I hope my question is not silly.
I have an existing app made with an express.js framework with a custom gulp config and ejs. Now, I want to integrate the all new shiny Foundation for Apps into it.
On the Zurb website, the manual install is only a one-liner through bower or npm (http://foundation.zurb.com/apps/docs/index.html#!/installation)
bower install foundation-apps --save
npm install foundation-apps --save
So that's what I did, but the Foundation formatting is not happening at all.
I tried to include the CDN reference lines (css and js) too, but the same is happening.
When I proceed to create an app with the "normal" installation, everything is working great. But I want to use the Express framework and this is not the case here!
I am missing something but I don't see what.
package.json
{
"name": "2004app",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"apache-server-configs": "^2.7.1",
"body-parser": "~1.12.0",
"browser-sync": "^1.3.0",
"cookie-parser": "~1.3.4",
"debug": "~2.1.1",
"del": "^1.1.0",
"ejs": "~2.3.1",
"express": "~4.12.2",
"foundation-apps": "^1.1.0",
"gulp": "^3.8.11",
"gulp-autoprefixer": "^2.0.0",
"gulp-cache": "0.2.2",
"gulp-changed": "^1.0.0",
"gulp-concat": "2.5.2",
"gulp-csso": "^1.0.0",
"gulp-flatten": "0.0.4",
"gulp-if": "^1.2.1",
"gulp-imagemin": "^2.0.0",
"gulp-jshint": "^1.6.3",
"gulp-load-plugins": "^0.8.0",
"gulp-minify-html": "0.1.5",
"gulp-nodemon": "^2.0.2",
"gulp-rename": "1.2.2",
"gulp-replace": "^0.5.0",
"gulp-sass": "^1.2.0",
"gulp-size": "^1.0.0",
"gulp-sourcemaps": "^1.3.0",
"gulp-uglify": "^1.0.1",
"gulp-uncss": "^1.0.0",
"gulp-useref": "^1.0.1",
"jshint-stylish": "^1.0.0",
"morgan": "~1.5.1",
"opn": "^1.0.0",
"psi": "^1.0.4",
"require-dir": "^0.1.0",
"run-sequence": "^1.0.1",
"serve-favicon": "~2.2.0"
}
}
For example, the following code is not rendering like it should. It only shows a line with 3 times "Content goes here", instead of this : http://foundation.zurb.com/apps/docs/#!/accordion
<zf-accordion>
<zf-accordion-item title="Input your title here">
Content goes here
</zf-accordion-item>
<zf-accordion-item title="Input your title here">
Content goes here
</zf-accordion-item>
<zf-accordion-item title="Input your title here">
Content goes here
</zf-accordion-item>
</zf-accordion>
Is what I am trying to do possible ?
How can I use the CDN references ? (I successfully put CDN references for bootstrap in another app)
Thanks!
It is possible!
Though it has quite a few moving pieces that you should understand.
I recently did the same thing, but depending on the size of your app's frontend it may take some time to understand everything that is going on. It's not as simple as just including a library.
You mention express app, is it an Angular app? First thing if your not familiar with Angular I would read about it and specifically 'Modules' as in the end that is all Foundation Apps is.
https://docs.angularjs.org/guide/module
You will need to create your angular module and have Foundation as dependency.
Also it is good to realize that the way that foundation for apps is packaged its meant to be compiled in its own weird sort of way. So basically whenever you make changes your re-compiling your front end html/logic/css.
Make sure your express app is serving up the Single Page Application which is Foundation Apps. Be sure to watch your web development console to see if your getting any strange Angular errors. If you are you can typically click on them and get help from the angular site.
Also the Foundation Apps gulp task is unique in it has its own little plugin to create the routing based off the templates. See the following link:
http://foundation.zurb.com/apps/docs/#!/angular
If your just getting into Front End Frameworks I would suggest going through a few basic Angular tutorials before tackling a angular app such as Foundation Apps.
Once familiar with Angular look at exactly what the Gulp build is doing (gulpfile.js). It takes care of the following:
Copies static resources
Its running SASS and compiling styling
Copies Foundation for Apps Javascript
Copies the templates and builds the routes (the route building is a little hidden
Once you understand what the Gulpfile.js is doing you should start to piece together how the front end is built.
I reworked it using Grunt, but ended up switching back to gulp because of their template job (ngHtml2js)
Don't giveup, be persistent and it will slowly make sense!
I'm working on the same task you mentioned up there, an existing MEAN application, that I developed with ejs front end template, and a front-end that I developed with the foundation-apps tools, the front-end has everything I need for my MEAN back-end, now for merging all of this together into a single node app.
UI is developed independently using foundation for app build tools such as gulp, considering my UI is developed with all the zurb foundation html parts are included to represent all the required functions served by my MEAN app. So after the build with foundation-apps the resulting build folder contains basic assets without any SASS or the need for foundation-apps to be in the package.json dependencies, since the foundation.js file is in the assets folder for the front-end, and sass is already built into app.css
I dont see how it's possible to have two single page web apps running on the same node server, in case I try separating the two different app configurations, angular dependency injection, routes, index files separated etc..
The challenge is wrapping up a single page web app with all dependencies, while maintaining how the foundation UI manages it's routing, as it is quite different from how express manages routing, it happens using different libraries.

Resources