So this is more of an open ended question: I've started working with node and I've been creating command line applications for practice. The majority of these apps take command line arguments and make http requests to an API and serve up the results based on the arguments passed. The thing is, I would like these programs to have useful front-end interfaces so that the results are not just display via the command line terminal. Is there an easy way to accomplish this? Is this what Express is useful for?
perhaps more fully, that's what express is for and that's what routes do for you - so that your browser can be directed to a default (e.g. index.html) page or a specific page or service. If you're rendering basic html pages, stored in an /HTML folder, to the user, then you might have the following kind of code in your app:
var express = require('express');
var app = express();
app.engine('html', require('ejs').renderFile);
app.use(express.static(__dirname + '/HTML'));
followed by a series of app.get('path/from/browser') and/or app.post('path/from/broswer') statements which tell your nodejs server what to do when various get and post commands are sent to the app.
as your app gets more complex, you may want to consider the router service as a way to structure your application code and associated services.
you also need to start an http server, so the browser can actually talk to the server. You would do that in a very simple way by executing the following code:
var cfenv = require('cfenv');
var appEnv = cfenv.getAppEnv();
app.set('port', appEnv.port);
var server = app.listen(app.get('port'), function() {console.log('Listening on port %d', server.address().port);});
In this simple example, your app is now using 3 new services: express, ejs, and cfenv. You would use the standard npm install process to get this into your local app so that you can use them. From your application root folder, you would execute npm install --save express, repeating for each of the three new services.
Related
I'm currently developing using ng serve, with proxy configuration, while the proxy points to another nodejs instance on the same machine.
This backend is a simple express server, like this (simplified):
var express = require('express');
var app = express();
var customers = require('./customers.controller.js');
app.get('/api/customers', customers.getAll)
var server = app.listen(8081)
The frontend (ng serve) runs on port 4200 and proxies /api to http://localhost:8081/api
As far as I can see, this is the recommended setup.
However, I would prefer to have the backend running directly inside of ng serve instance instead of the proxy.
And if possible, even take advantage of the automatic reload feature of ng so that I don't have to restart the server if I change something on the backend code.
As both are nodejs and ng seems to be configurable, I think this is possible, but I can't find a starting point for defining my own routes
Its possible to do this
you just need to put your angular into the backend by utilize the nodejs routing
basicly angular is a "static file" and the entry point is coming from the index.html
// Redirect all the other resquests
this.app.get('*', (req, res) => {
res.sendFile(path.resolve('dist/index.html'));
});
but remember you need to handle the routing for image, js, css and others also.
Is it possible to host web page with angular.min.js functionality using nodes http module?
I'm making a really simple web project that is going to fetch some data and I decided to use angular.js to display data no the page. I tried to read index.html using fs module and sent it as response to the localhost. It seems that angular.min.js, that was included in the pages head section did not load as it would when I run the page in the browser from the file explorer.
angular is a web application, so, please serve the angular using your node.js server and load the app in the web browser.
add a listener of get then send all files that index.html need, it is done.
or use app.use(express.static('public')); which public is your 'public' folder, put all file in dist to serve as a static content.
I use the first option every time but it is trick but functional.
sample code is:
const express = require('express');
const router = express.Router();
const path = require('path');
router.get('/:id',(req,res)=>{res.sendFile(path.join('/path/to your/file/'+req.params.id));});
router.get('/',(req,res)=> res.sendFile(path.join('/path/to/your/file/index.html'));});
module.exports = router;
I'm really confused. I started learning to use node.js with MEAN stack. Before I used webpack and browserfy without really understanding it.
What confuses me is the following:
Express fires up a server and I can handle the requests
Webpack fires up a server
Browserify fires up a server
simply typing in plain js e.g. var http = require('http'); http.createServer(function (req, res) { ... fires up a server
Well, Webpack and Browserfy (as far as I understand) also bundle js files. How does the logic "under the hood" works and do they bundle everything I code and send it to the client (E.g. my DB login)?
I read this one Webpack vs webpack-dev-server vs webpack-dev-middleware vs webpack-hot-middleware vs etc , which told me webpack uses express under the hood. So maybe express also uses the plan .js server under the hood?
Well, I can go on like this forever. I am a little confused.
Well, what and where are the differences and how do thee apps work (together)?
First of all express use the core API and module of node.js like http module .
express uses the http module to create the server at specific port so
app.listen(3000);
will simple be like this
var http = require('http);
var server = http.createServer() ;
server.listen(3000) ;
server.on('request',function(req,res){
// here express will do all its magic
// and handle the request and response for you under the hood
})
Second things is that webpack and other bundling tools is used for bundling files and assets in the front end not the back end and they can create simple server for listening for changes in your files to give you other features like
+ live reload
+ hot module replacement
but also you can use webpack in the back end to use things like babel-loader or use the hot module replacement feature
so express works for the back end
and webpack use it in the front end
you can create different ports on each server and communicate between them via ajax API like fetch
and that's how actually it should work .
learn more
understanding express.js
understanding express and node fundamentals
webpack.js concepts and documentation
I just set up a NodeJS server and wanted to use the vhost function from Express to allow for easy project setup. I want to be able to create a new directory for a new project without going through the hassle of creating new subdomains etc.
Basically, I want to be able to reach project1 at node.domain.com/project1 and project2 at node.domain.com/project2.
I'm now running server.js, which is located in the root (node.domain.com/server.js) and contains:
var express = require('express');
var app = express();
app
.use(express.vhost('node.domain.com', require('./project1/app.js').app))
.use(express.vhost('node.domain.com', require('./project2/app.js').app))
.listen(3000);
It's all working fine, when I go to node.domain.com/project1 I get the results of ./project1/app.js but whenever I change something in any of the app.js files it requires a restart (Ctrl+C followed by node server.js) for it to update the changes.
And the contents of app.js are, for example:
var express = require('express');
var app = exports.app = express();
app.get('/project1', function(req, res){
res.send('Hello World [/project1]');
});
Any idea why this is?
A thing to note is that I also run Apache on the same server, and I'm using this guide to allow both servers to run on port 80 (but accesible via different subdomains).
Oh! I feel dumb now, seems like I need to use something like forever, with its w flag.
Is it possible to store templates for an express application in a separate package?
In my usecase I'd like to have a shared package containing global templages to give all apps the same look and feel even so they run as an independent entity on another port or even another server. Local content templates could live within the app, so all I'm looking for is a way to share that kind of code between multiple apps.
Going a step further I was thinking about skinning packages which can overwrite the default templates. Once installed in the "template package" it could change the look and feel of all applications using the core templates.
Is there a way of doing that without having to drop the comfort of express?
cu
Roman
This is possible using express. You can basically mount a whole app object to a specific route (with all routes and middleware).
var express = require('express');
var coreApp = express();
var blogApp = express();
var wikiApp = express();
// init blogApp and wikiApp with middleware and routes
coreApp.use('/blog', blogApp);
coreApp.use('/wiki', wikiApp);
Now you can mount your templates into this modular apps and then mount them into your core app.
Here's a screen cast from the express creator himself, called modular web applications.