I'm sorry to ask such a simple question. I've been sent files by someone, an index.html file which pulls in a js file within script tags. I have to start a webserver to get through authentication and view the files (am in dev).
In my CLI i have navigated to the directory containing index.html. I have checked with node -v that I have it installed globally (yes, v 8.6). I've run the simple command node and checked my browser at http://localhost:3000 and a few other ports but get no joy. I've also tried node index.html but CLI throws an error.
How do i start the webserver? All the examples online tell me to build a .js file, but this is not an option.
Steps to set up a node web server
Create the route folder from your local machine.
Go to the command prompt from the project root path.
Install express using the command npm install express
Create server.js file
create the folder wwww and create the Index.html inside it.
server.js
var express = require('express');
var app = express();
app.use(express.static(__dirname + '/www'));
app.listen('3000');
console.log('working on 3000');
Index.html
<!doctype html
<html>
<head>
<title> my local server </title>
</head>
<body>
<h1> server working </h1>
<p> just put your html,css, js files here and it work on your own local nodejs server </p>
</body>
</html>
Go to the project root path and take the command prompt, then start the server by running the command node server.js
Then go to the browser and run the url localhost:3000.
Now you can see the html page will render on your browser.
Since you don't want to build a backend but just an http server.
I would propose to use an npm package that do just what you need:
Open a console
npm install http-server -g
Go to your "index.html" folder (in the console) then type:
http-server
Then reach your content in your browser at this address:
http://localhost:8080
Documentation here:
https://www.npmjs.com/package/http-server
Yes, this is possible.
A very simple example of how to do this would be to create file, let's call it app.js and put this in it:
const http = require('http'), // to listen to http requests
fs = require('fs'); // to read from the filesystem
const app = http.createServer((req,res) => {
// status should be 'ok'
res.writeHead(200);
// read index.html from the filesystem,
// and return in the body of the response
res.end(fs.readFileSync("index.html"));
});
app.listen(3000); // listen on 3000
Now, run node app.js
Browse to http://localhost:3000
There's loads of other npm packages that will help you out do this, but this is the simplest 'pure node' example to literally read index.html and serve it back as the response.
Its very easy to start a server using node js
Create a server.js file,
const http = require('http')
const fs = require('fs');
http.createServer(function (req, res) {
fs.readFile('index.html', function(err, data) {
res.writeHead(200, {'Content-Type': 'text/html'});
res.write(data);
res.end();
});
}).listen(3000);
Run node server.js
Here is a reference
This will even solve your backslash issue by this
Related
So my express app has a small Node server setup so it can serve up the index.html file when the home route '/' is hit. This is a requirement of using the App Services from Azure, there has to be this server.js file to tell the server how to serve up the client, and i had a previous implementation of this working, however i wanted to change my file structure. previously i had, the client React app in a folder client and the server.js in a folder server along with all of the conrtollers and routes. i've since moved the server API to its own application as there are other apps that depend on it. and i moved the client up one directory into the main directory. Everything was working fine till the other day when all of the sudden when you hit the home route / it will not serve up the index.html file. if you hit any other route it works, if you even hit a button linking back to the homepage, it works, but it wont serve up the app from the / and i cannot for the life of me figure out why, on my development server there are no errors in the console. and im most definitely targeting the correct directory and place for the index. but its like the server isnt reading the route to serve up.
if (process.env.NODE_ENV === 'production') {
console.log('running');
app.use(express.static(path.resolve(path.join(__dirname, 'build'))));
// no matter what route is hit, send the index.html file
app.get('*', (req, res) => {
res.sendFile(path.resolve(path.join(__dirname, 'build', 'index.html')));
});
} else {
app.get('/', (req, res) => {
res.send('API is running...');
});
}
So here im saying if the NODE_ENV is in production make the build folder static, and then whatever route is hit. (Note: i also tried this app.get with other route formats such as /* or / all have the same issues. however in my previous iteration when the client and server where deployed in the same location, /* is what i used.) The .env varialbes are setup correctly, as when the server is ran, itll console log running.. but even if i put a console log inside of the app.get() its like its never hit unless i access the route from something else first.
for example, if i place a console log inside of app.get that states hit whenever the route is hit, hitting / directly does nothing, but if i go to /login itll serve up the correct html on the client and console log hit in the terminal...
If you are having server files inside the client react app, then we are basically accessing file which are not inside our server file. So, we can serve static files using the following code:
const express = require("express");
const app = express(); // create express app
const path = require('path');
app.use(express.static(path.join(__dirname, "..", "build")));
app.use(express.static("build"));
app.listen(5000, () => {
console.log("server started on port 5000");
});
Now in your packages.json of the client react app change the name of start tag under scripts tag to start-client. Then add this following tag to the scripts tag:
"start":"npm run build && (cd server && npm start)",
Basically, this will build the react app and start the server.
It should look like this :
Also in the packages.json of your server add the following tag under script tag
"start":"node server.js"
So when you run the following command npm start it should look like this :
I have written down this code in NPM module with the help of socket.io,
Index.html
<html> <head> <title>WebRTC client</title> </head> <body>
<script src='socket.io/socket.io.js'></script> </body> </html>
In server.js file
var static = require('node-static');
var http = require('http');
var file = new(static.Server)();
var app = http.createServer(function (req, res) {
file.serve(req, res);
}).listen(8181);
var io = require('socket.io').listen(app);
io.sockets.on('connection', function (socket){
console.log('io.sockets.on');
});
Root folder has index.html, server.js, and socket.io folder contains no file
Hit localhost:8181 in a browser, index.html will run and socket.io/socket.io.js file automatically created
http://localhost:8181/socket.io/socket.io.js
and I checked my socket.io folder there is no file? How socket.io.js created? and what is the main purpose of a socket.io/socket.io.js file?
"You might be wondering where the /socket.io/socket.io.js file comes from, since we neither add it and nor does it exist on the filesystem. This is part of the magic done by io.listen on the server. It creates a handler on the server to serve the socket.io.js script file."
from the book Socket.IO Real-time Web Application Development, page 56
My simple node server is:
const express = require('express');
const app = express();
app.get('*', (req, res) => {
res.sendFile(__dirname + '/dist/page/index.html');
})
app.listen(3335, () => { console.log('Server is listening on 3335'); });
But I'm getting the index file that seems not running the main.js
The Angular app, at the moment it's literally a page/component that is app.component.ts, so there is not any routing.
Use express.static() for serving static files.
It is because you have set a response of 'index.html' file for each and every request the server would receive. The first response would be good that's the index.html page only as expected. But, the index.html page must be having some script and css tags to fetch your Angular Javascript code which I assume would be on the same node server. So when the browser would encounter a line like:
<script src="/angularApp.js"></script>
..in your index.html file while parsing it, it would make another request to the node server for http://localhost:<port>/angularApp.js but would get the index.html file as the response as that is what you have set.
Do it like this to serve static files like .html, .css, .js or what have you:
app.use(express.static(path.join(__dirname, '/dist')));
I am new in Nodejs and using Mac OS (MAMP, localhost:8888), I have already installed and I can execute programs in terminal. But how to in build with html. Can, we include nodejs as a external library like (jQuery, Bootstrap).
Please refer this Hello world example.
node.js
var http = require("http");
var server = http.createServer(handler);
var fs = require('fs');
server.listen(3003)
function handler(req,resp){
fs.readFile("index.html",function(err,data){
if(err){
console.log("error in loading file.");
resp.end("failed to load")
}else{
resp.writeHead(200);
resp.end(data)
}
})
}
HTML
<html>
<head>
</head>
<body>
Hello world.!!
</body>
</html>
Once you mentioned port number in listen function,
node server will run on that port.So until you are not giving same port number as Apache,you can run both Apache and nodejs parallel.If your Apache and nodejs server sharing same port number , then you need to stop one of them in order to use other.
Your Question :
Can, we include nodejs as a external library like (jQuery, Bootstrap).
Node.js is not library.So you can not include it like jQuery or bootstrap.
It is platform for javascript to run on server side.And using nodejs we can create Server which serve your content of Web like Apache do.
When you say node app.js (insead of app.js it can be any name) from your command prompt,you starting your node server.
In above example index.html you can include your jQuery or angular or bootstrap library as you do when using Apache
I have just started learning nodejs with the socket.io.js library. My question isn't really related to the stuff in these libraries but rather on how the files are served by a visiting browser.
In my server directory there are just 2 files present (index.html and server.js) along with the node_modules directory (for socket.io). In the index.html I have a script tag including the client side socket.io lib as follows,
<script src="/socket.io/socket.io.js"></script>
The relecvant server code is,
var server = http.createServer(
function(req, res) {
res.writeHead(200, { 'Content-type': 'text/html'});
res.end(fs.readFileSync(__dirname + '/index.html'));
}
).listen(8080,
function() {
console.log('Listening at: http://localhost:8080');
}
);
My question is where is this file present on the server (there is no socket.io directory in the dir where index.html is present)? So how and from where is this being resolved and downloaded correctly by the web browser?
Sorry for the noob question.
The client side file is injected by the socket.io npm module automatically so that when you upgrade the npm module your client side version of socket.io gets updated automatically.
The actual file lives at:
/usr/local/lib/node_modules/socket.io/node_modules/socket.io-client/dist/socket.io.js
Edit: Forgot to mention that when you initialise socket.io you are actualy making it start its own server that serves the file.