Serving a static files with Node.JS server on Heroku - node.js

I am building a Node.JS application. It contains several static files (HTML, JS, CSS) and a Socket.IO webserver.
Now I am using Express.JS to serve static files:
const server = express()
.use(express.static(path.join(__dirname, '..', 'public'))) // like that
.use(sessionMiddleware)
.use(passport.initialize())
.use(passport.session())
but I think it's an overkill for that. I know that you can set up nginx to serve static files from some folder, but can I do the same on Heroku?
Also, I'm not sure but maybe I should put the static files onto CDN (like Amazon S3) and serve it from there?

Related

How to host a static landpage and react on the same node server?

Currently, I have a static landing page hosted on firebase on the url "mycompany.com" (not the actual URL).
My node server (using express) runs on heroku and it contains my backend API and my react frontend (using react-router). In order to make everything run, I had to point this to a subdomain: app.mycompany.com
What I really wanted to do, was to have my landing page on "/" and have that to be the default redirect, all hosted in my node server (without having to have two servers and point to a subdomain).
I'm struggling to understand how could I set up this, or if have to change something to make this work.
Thanks in advance!
If you make a static build of your react app you can serve this build folder along with your static landing page. You'll still have to specify the path where you want your app traffic to go:
const express = require('express');
const app = express();
const staticLandingPage = express.static(path.join(__dirname, "./path/to/landingpage"));
const reactApp = express.static(path.join(__dirname, "./path/to/reactBuild"));
app.use("/", staticLandingPage);
app.use("/app", reactApp);

Angular in a NodeJs Server

I'm beginner in Angular. I have a nodejs server and I have Angular for the front end. Now I would like to know if it's possible to have just one server for both ?
Because in some videos from youtube, they had one server for node and one server for angular.
Thank you, bye
At a basic level you'd need to set the static path for your built, static Angular files and if you are using Angular routing you'd probably want to direct all requests to your index.html of the Angular project so that Angular can handle all client side routing.
For example, setting the static path for a built Angular CLI project that sits in the default public folder created by express-generator. The example uses dist as that is the default destination of the Angular CLI project when you execute ng build.
app.use(express.static(path.join(__dirname, 'public', 'dist')));
Catch-all route to direct any requests not caught by your Express application route definitions, such as RESTful routes returning JSON data or similar, to the Angular project's index.html:
// some routes
var users = require('./routes/users');
app.use('/users', users);
// other routes
var todos = require('./routes/todos');
app.use('/todos', todos);
// catch-all route
// needs to go AFTER all other express server route definitions
app.use('*', (req, res) => res.sendFile(path.join(__dirname, 'public', 'dist', 'index.html')));
If using Angular CLI, during development you can run the projects separately, using a proxy.
Hopefully that helps!
Yes, it's possible to have one server for both.
You can serve your AngularJS files via your favourite HTTP server (e.g. express) on your NodeJS server as static files like so:
app.use(express.static(path.join(__dirname, 'client')))
Where client is the directory containing your front-end content.

How to server static assets on an Openshift NodeJS app

I am working on my NodeJS app hosted by Openshift. Everything works fine right now but I want to speed things up by serving static files (html, css, js) from a web server rather than doing it from Express. I've read somewhere that Node cartridges do not have an Apache server running, and thus no .htaccess file from where I can configure Apache to send my files.
How can I serve my static files from a web server like Apache or Nginx from my NodeJS app on Openshift?
This may suit your needs. Bare as it gets static server...
var finalhandler = require('finalhandler')
var http = require('http')
var serveStatic = require('serve-static')
// Serve up public/ftp folder
var serve = serveStatic('public/', {'index': ['index.html']})
// Create server
var server = http.createServer(function(req, res){
var done = finalhandler(req, res)
serve(req, res, done)
})
// Listen
server.listen(process.env.PORT || 3000);
It's been a while since the original question was posted, but maybe this will help other people facing the same issue. Have a look at this custom OpenShift cartridge here: https://github.com/gsterjov/openshift-nginx-cartridge
I haven't tested it personally, but I've built other custom cartridges and I know the OpenShift platform is quite flexible if you're proficient enough with the shell, so if the above cartridge doesn't suit your needs you can easily fork it and tweak it as you see fit.
Personally I'm almost always serving static assets from Node.js. The built-in static server in Express.js got so much better lately and there's also st if you need more control over caching / etags.
Also, I've recently came across this interesting CDN-like alternative to "classic" hosting for static assets: http://surge.sh. I can imagine it would be fairly trivial to implement a gulp/grunt scenario for publishing your static assets on surge on deployment...

How to enable static files (and less support) when hosting a nodejs app within IIS using IISNode

Background:
Nodejs app using expressjs.
Hosted on IIS using IISNode
Nodejs app is in virtual directory called /myVirtualDirectory
Problem:
You want to provide static files or css using less but the url that is passed to nodejs is the full url and doesn't match what would be expected with a standalone nodejs app.
Solution:
var express = require('express');
var app = express();
var lessMiddleware = require('less-middleware');
app.use('/myVirtualDirectory', lessMiddleware({
src: __dirname + '/public',
compress: true
}));
app.use('/myVirtualDirectory', express.static(__dirname + '/public'));
Note where we have specified the middleware to use we have passed in the url prefix for it to respond to. As long as this is the same as the name of the virtual directory this will match and your files will be served up as expected.
One of the benefits of hosting node.js apps in IIS using iisnode is that you can rely on the static file handler in IIS to serve your static files. The benefit is a substantial improvement in performance, since requests for static content are served by native code without ever invoking JavaScript.
To set up a node.js application hosted in IIS using iisnode to serve static files using IIS static file handler, use the URL rewriting module as described in http://tomasz.janczuk.org/2012/05/yaml-configuration-support-in-iisnode.html
To understand the performance benefits of using static file handler instead of node.js modules to serve static files, read http://tomasz.janczuk.org/2012/06/performance-of-hosting-nodejs.html.

Node.js express framework serve static swf file

I need to serve static swf using express framework generating dynamic view similar to:
app.get('/*', function(req, res){
// serve swf here
});
Thanks
Is there some reason you can't just declare a static folder?
app.use(express.static(__dirname + '/public'));
If you don't want to use the Express static folder, then you can just read the file off of the file system and serve it directly.
res.sendfile('path/to/my.swf');

Resources