Im trying to create simple node.js server for html using http and express
It's working, but css don't showing
Here is code of my server
const express = require("express");
const app = express();
app.use(express.static("css"));
var router = express.Router()
app.use('/',router)
router.get("/", (req, res) => {
res.sendFile(__dirname + "/index.htm")
})
app.listen(8080)
And code of my server, what created using http
const http = require("http")
const port = 8080
const fs = require('fs')
const server = http.createServer(function(req,res) {
fs.readFile('./index.html', (error, data) => {
if(error) {
res.writeHead("404")
res.write("Error. File not found.")
} else {
res.use
res.write(data)
}
res.end();
})
})
server.listen(port, function(error) {
if(error) {
console.log(error)
} else {
console.log("server is listening on port " + port)
}
})
all my html code
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Domodinak</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<p>Hello world</p>
</body>
</html>
also css
body {
background-color: deeppink;
}
if you know how to help me, please help :)
Make sure that you're addressing css folder correctly. It depends on your project folder structure. It is suggested to save your static files in a folder called public and then save your files in separated folder like js and css. For example, i assume that you have a src folder which is your directory for express server file, another folder alongside the src folder, you have a public folder with css subfolder.
Put your stylesheet file in css subfolder, and html file in just public folder and then change your code to this:
const express = require("express");
const path = require("path");
const app = express();
app.use(express.static(path.join(__dirname, "../public")));
// var router = express.Router()
// app.use('/',router)
// router.get("/", (req, res) => {
// res.sendFile(__dirname + "/index.htm")
// })
app.listen(8080)
Your project structure should looks like this:
|-public -| css -| style.css
index.html
|-src -| app.js
Run the server file then check your browser with just localhost:8080. It serves index.html from static directory which you passed to express earlier.
Related
var express = require('express');
var app = express();
app.use("/", function(request, response){
var MongoClient = require('mongodb').MongoClient;
var url = "mongodb://localhost:27017/";
MongoClient.connect(url, function(err, db) {
if (err) throw err;
var dbo = db.db("Test");
dbo.collection("users").find({}, { "name":"John" }).toArray(function(err, result) {
if (err) throw err;
console.log(result);
// res.sendFile(__dirname + "/views/index.ejs");
db.close();
});
});
});
app.listen(3000, function () {
console.log('Example app listening on port 3000!');
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="./index.js"></script>
<title>Document</title>
</head>
<body>
<h1 id="result"><%=result%></h1>
</body>
</html>
I have 2 files and I want to use a variable from one file in another. How can I send the variable result from my nodejs file to my ejs file, in <h1 id="result"><%=result%></h1>?
In order to do that you have to use express res.render()
according to the docs
res.render(view [, locals] [, callback])
Renders a view and sends the rendered HTML string to the client. Optional parameters:
locals, an object whose properties define local variables for the view.
You should use something like this
res.render('index',{result});
then now you would be able to access that value you have sent over in your index.ejs file however I would advice you to explicitly declare in your application that you are using ejs so that you would not have to go through the struggles of re-stating ejs at the end of you code like before
at the top after this code var app = express()
you could say
app.set("view engine", "ejs");
So I'm trying to use values in my json file to display on the webpage. For instance, one value will be the text on the accordion button.
I'm using express and ejs, and I've been trying to use <%- %> to call the text in the json file but it won't seem to appear on the webpage.
index.js
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);
app.get('/', function(req, res) {
res.locals.ClinNotes1=('.\ClinNotes.json');
res.render('webpage');
})
webpage.ejs
<div id="Problems" class="tabcontent">
<div class="problemItems">
<button class="accordion" id="accordionDis">
<span><ul><%-ClinNotes1.resourceType%></ul></span>
ClinNotes.json
{ "resourceType": "Bundle",
....}
If you want to show your JSON data on your webpage you can do something like that:
index.js
//here import your json file
const notes = require('./ClinNotes.json'); //suppose your file is in the root directory
app.get('/', function(req, res) {
res.render('webpage', {data: notes});
})
webpage.ejs
<span><ul><%-data.resourceType%></ul></span>
Hopefully, it might help you
Here is a quick example I put together.
Basically, you want to iterate over the JSON file the same way you would a Javascript object.
app.js
const express = require('express');
const app = express();
const port = process.env.PORT || 3000;
//Use EJS Templating Engine
app.set('view engine', 'ejs');
app.get('/', (req, res, next) => {
res.locals.dataFromJSON = require('./data.json');
res.render('index');
});
//Start Server
app.listen(port, () => {
console.log(`Server started on port number ${port}`);
});
index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Example</title>
</head>
<body>
<h1>Hope this helps!</h1>
<% Object.values(dataFromJSON).forEach((value) => { %>
<button><%= value %></button>
<% }); %>
</body>
</html>
data.json
{
"resourceType": "Bundle",
"resourceType2": "Bundle2",
"resourceType3": "Bundle3",
"resourceType4": "Bundle4"
}
Here is a gitub repo i created
Here is the expected output deployed to heroku
I hope this helps! 👍
So I recently moved my website from a single-page website to an express server. Now I changed the file paths, but I cannot get my css and js files to load.
As seen in the developer console, the GET request to https://<website>.com/public/css/main.css returns a 404.
This is the css link:
<link rel="stylesheet" type="text/css" href="../public/css/main.css">
This is my server:
const express = require('express');
const app = express();
const getpages = require('./router/getpages.js');
app.use('/', getpages);
app.use(express.static('public'));
// 404's
app.use((req, res) => {
res.status(404).send('Page not found or non-existant.<br><br>Home');
});
app.listen(3000, console.log('Running on port 3000'));
This is ./router/getpages.js:
const router = require('express').Router();
const path = require('path');
router.get('/', (req, res) => {
res.sendFile(path.join(__dirname, '../views/', 'index.html'));
})
module.exports = router;
This is the file structure:
Note, I could not find any other questions that helped me, before this is marked as a dupe again.
As can be seen from the documentation, you should not have public in the route
https://<website>.com/css/main.css should work as expected.
refer : https://expressjs.com/en/starter/static-files.html
For example, use the following code to serve images, CSS files, and
JavaScript files in a directory named public:
app.use(express.static('public'))
Now, you can load the files that are
in the public directory:
eg : http://localhost:3000/images/kitten.jpg
Express looks up the files relative to the static directory, so the
name of the static directory is not part of the URL.
I have a web calling several scripts, images, styles, etc., in different folders (inside and outside the main folder):
File tree
- /
- website
- scripts
- data.js
- customJquery.js
- styles
- animate.css
index.html
main.css
back.jpg
- otherFunctions.js
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,800,800i">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Faster+One">
<link rel="stylesheet" href="styles/animate.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<img class="fondo" src="back.jpg">
<div class="content">
<!-- stuff... -->
</div>
<script src='scripts/data.js'></script>
<script src='scripts/customJquery.js'></script>
<script src='../otherFunctions.js'></script> <!-- Here's the conflict... -->
</body>
</html>
All paths are routed ok, except for ../otherFunctions.js. It seems that NodeJS/Express skips de relative part .. and only receives /otherFunctions.js which is handled wrongly.
Here's my server side:
index.js
const express = require('express');
const https = require('https');
const fs = require('fs');
const app = express();
const config = require('./config');
var webId;
var options = {
key: fs.readFileSync(config.paths.certificate.key),
cert: fs.readFileSync(config.paths.certificate.crt),
requestCert: false,
rejectUnauthorized: false
};
app.use(function (req, res, next) {
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader("Access-Control-Allow-Credentials", "true");
res.setHeader("Access-Control-Allow-Methods", "GET, HEAD, OPTIONS, POST, PUT");
res.setHeader("Access-Control-Allow-Headers", "Accept, Access-Control-Allow-Headers, Access-Control-Request-Headers, Access-Control-Request-Method, Authorization, Content-Type, Origin, X-Requested-With");
next();
});
app.get('/favicon.ico', function(req, res) {
res.status(404).send('No favicon found');
});
app.get('/:id', function(req, res, next) {
id = req.params.id;
if (id.search(/\w+\.[A-z]+$/g) < 0) {
webId = id;
res.sendFile('index.html', {root: config.paths.webs + id});
} else {
res.sendFile(id, {root: config.paths.webs});
}
});
app.get('/:folder/:file', function(req, res) {
let folder = req.params.folder;
let file = req.params.file;
res.sendFile(file, {root: config.paths.webs + webId + '/' + folder});
});
app.get('*', (request, response) => {
response.send('GET request not found: ' + request.url);
});
app.use((err, request, response, next) => {
response.status(500).send(err.message);
});
https.createServer(options, app).listen(443, function() {
console.clear();
console.log("NodeJS secure server started at port 443");
});
Unless you have a specific need to serve your static files this way, I'd suggest using the express built-in static file serving.
Regarding the use of '../otherFunctions.js' in your HTML, I'm afraid the browser tries to resolve the path relative to the position of the HTML file itself, so for example, if the HTML file was my.domain.com/foo/bar/index.html, the browser would be looking for my.domain.com/foo/otherFunctions.js. Ideally, all the static files you want to serve to the client should be in one folder that is then used by the express.static(...) call.
I am using Angular6, trying to serve json data from a google map API to make ajax calls to Node.js with MongoDB, I have a form for placing markers on a google map using the api, I am trying to set up node js to take in the json data so that it is not being stored on the local storage, I have being following tutorials trying to set up Node.js to work with express and to store the places.
Using express: "^4.16.3", mongodb: "^3.1.1",
I have created the dist folder with all of the relevant files and I have also created my server folder with route folder and api.js, also I have my server.js, I think that I have all in place but I keep getting this error in my console when I run it on the local host 3000,
this is the error that is showing up in my google chrome console
When I run http://localhost:3000/api it displays that the text 'api works'
This is my Server.js
// Get dependencies
const express = require('express');
const path = require('path');
const http = require('http');
const bodyParser = require('body-parser');
// Get our API routes
const api = require('./server/routes/api');
const app = express();
// Parsers for POST data
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
// Point static path to dist
app.use(express.static(path.join(__dirname, 'dist')));
// Set our api routes
app.use('/api', api);
// Catch all other routes and return the index file
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'dist/mapit/index.html'));
});
/**
* Get port from environment and store in Express.
*/
const port = process.env.PORT || '3000';
app.set('port', port);
/**
* Create HTTP server.
*/
const server = http.createServer(app);
/**
* Listen on provided port, on all network interfaces.
*/
server.listen(port, () => console.log(`API running on localhost:${port}`));
This is my api.js
const express = require('express');
const router = express.Router();
/* GET api listing. */
router.get('/', (req, res) => {
res.send('api works');
});
module.exports = router;
This is my index.html in my dist folder
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mapit</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://bootswatch.com/4/simplex/bootstrap.min.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="runtime.js">
</script><script type="text/javascript" src="polyfills.js"></script>
<script type="text/javascript" src="styles.js"></script>
<script type="text/javascript" src="vendor.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
I think you have the following problem, you don't call next on your middleware and thus the HTML file cannot be send. You also try to call res.send() twice which you shouldn't do, express can only send one response. I suggest you change your api the following:
router.get('/', (req, res, next) => {
console.log('api works');
next();
});
Now the api works will logged in the terminal (nodejs) and not the browser console and the HTML should be send succesful.
Hopefully helps you!
Try app.use(express.static(path.join(__dirname, 'dist/mapit')));
Difference is using 'dist/mapit' instead of only 'dist'.
Where have you placed your server.js file? I was seeing the same issue when I had my server.js within the DIST folder.
I moved the server.js file up one level so it is in the parent directory of the DIST folder and my site files css/js etc all loaded as expected.