expressjs render html file without any engine - javascript

I am new to nodejs and expressjs
I am trying to develop a simple login page which has a username field and a password inside a form. on submit of the form i will redirect the user to a home page where i will display the message welcome user- userName. I want both the login and home pages to be simple html files. The form in login page has action set to home.html so when the user submits the form i can get the user name and password using res.body.userName and res.body.password. My question is how to use express to render html file. I do know that i can use res.sendfile function to send a html file but sendfile function does not support sharing variables to the html file.
I have posted below my code in app.js
var http = require("http");
var express = require("express");
var app = express();
app.use(express.bodyParser());
app.all("/",function(req,res,next){
res.render("login.html");
});
app.all("/home.html",function(req,res,next){
res.render("home.html",{"userName":req.body.userName});
})
http.createServer(app).listen(3000,function(){
console.log("Listening at port 3000");
})

You don't need a rendering engine to serve up static assets like html files. You should rethink what is being served up on different request but for what you want you have to place your static assets in a directory and tell express where they are like so
app.use(express.static('public'));
Assuming your server file is on the root, and you have an public folder on the root as well, put your html files in the folder. By default, express will look for an index.html file in the foot of that public folder and serve it on a GET request to /. You are overriding that by serving your login page. That's fine. You have to use res.sendfile('/path/to/file') instead of res.render()

Related

I have a public folder in my Node.js/Express.js project which contains some images. When I try to access those images through URL, I get 404 error

I have a Node.js/Express js project with the following folder structure
root
----bin
----controllers
----middleware
----models
----node_modules
----public
--------images
------------test.png
----routes
----views
I'm trying to figure out what URL I need to access in order to be served the test.png image that is inside the public/images folder. I thought it would be the following url:
http://localhost:3000/public/images/test.png
However, I get a "Not Found, 404" error
You should register an API middleware to serve the static files from the disk.
var express = require("express");
var app = express();
app.use(express.static('path/to/static/directory'))
in your case, you can use,
app.use(express.static('public'))
Refer https://expressjs.com/en/starter/static-files.html for additional details.

How to render a html page, which exists in one of the subfolders and has its own stylesheets and its own script, using express and node?

I want to render a HTML page, which exists in one of the sub folders and has its own style-sheets and its own script, using express and node, I have downloaded separate login page, etc, which I want to render in this manner.
Let's say you have the following file system:
server.js (file)
website (directory)
-> index.html
style.css
code.js
To serve your entire website directory (the index.html file, the style.css file and other files), you will need to use the express built-in middleware function express.static.
const express = require('express')
const app = express()
app.use(express.static(website)) // your directory you want to expose
app.listen(3000, () => console.log('Listening on *3000!')) // 3000 is just an example port

how to serve html file used in react in server

this is folder of code
I use node js and react to build a project I build design using react and controller to get data how I can serve html file in server so when run node server.js it open html page that I created I try this in server. js
app.get('/english', function(req, res) {
res.send(path.join(__dirname + '/index.html'));
});
and when i run this route localhost:3000/english i got this
/home/projects/folder/folder2/myproject/index.html
Read the html file first. You could assign it to a variable first then before sending.

Getting web application production ready (angularjs/nodejs)

My web application consists of angularjs on front end side and nodejs server listening to client requests. This is my folder structure:Folder Structure
UX contains client side code and IT contains server side code. I am using gulp to watch over development changes and for packaging (you can see the dist folder in UX). I use two terminals to launch this web application locally. From one terminal, I use gulp serve (UX folder) to start a static UI server which monitors the changes as I make to UI and reflect back the changes on the browser immediately. From the second terminal, I start a node server2.js server.
The UX/src/app folder has a config file where I specify server ip address and app.js uses this info to connect to server (currently).
Now, I want to deploy this app over cloud. On the cloud, I have to specify a node it/server2.js as a starting point in its config file. Hence, I want the corresponding web link should point to index.html in UX/src/app folder.
Hence, I need some advice on how to integrate my client side app.js file in the server2.js file on server side.
I am an amateur.
Thanks a lot!
I added this code to my server2.js file:
var express = require("express");
var app = express();
app.use(express.static("ux/dist/"));
app.get("/", function(req, res, next){
res.sendFile('index.html');
});
Currently, it is invoking index.html page from UX folder. But, I am not sure whether I have done it the ideal way. Need help on this.

Having all website paths load the same static website in express

In my express server, I want to have all paths load the same static website, which I tried doing with the following code:
const express = require('express');
const app = express();
app.use('*', express.static('build'));
app.listen(3000);
Unfortunately I am presented with the following console errors when I navigate to any path on localhost:
:3000/main.js/:1 Uncaught SyntaxError: Unexpected token <
When attempting to view the JS file with the error, it seems to be serving index.html in its place.
I know this is due to the wildcard, but I can't think of a way to cleanly exclude all file names and paths from the static server.
I think you're looking for something a little more like this..app.use(express.static('public')
if your tree looks like
ProjectName
| server.js
| public
| index.html
you don't need the * as a parameter since setting the express.static sets the folder open to public view. This is how you separate your server code and client code. Be careful not to expose your entire project directory as people will then have access to your server code. This is why you're client files should be kept in a public folder or a www folder (common practices)
--EDIT
//this will server css, and js files so they can be linked into the html
app.use(express.static(__dirname + '/public'));
//this will force all url's except the public files to be given the index.html file.
app.use('*', function(req, res) {
res.sendFile(__dirname + '/public/index.html');
});

Categories

Resources