(I know this question have been asked many times in many form, but I tried a lot of solution and none work the way it should.. So maybe a solution adapted to my work would help me understand.)
Here is the structure of my project.
Here is the index.html :
<!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">
<link rel="stylesheet" href="./../node_modules/bootstrap/dist/css/bootstrap.min.css">
<title>Document</title>
</head>
<body>
<nav class="navbar navbar-default ">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
</div>
</nav>
<script src="../node_modules//bootstrap.min.js"></script>
<script src="./../node_modules/jquery/dist/jquery.js"></script>
</body>
</html>
And here is the server/app.js. I let the res.sendFile(); empty on purpose.
//export used
var express = require('express'),
url = require("url"),
path = require("path"),
fs = require("fs");
const _port = 3000
var app = express();
app.get('/', function(req, res){
res.sendFile();
});
app.listen(_port, function() { console.log('listening port '+_port+"\n__dirname : "+__dirname)});
The purpose of the server for now is just to send the index.html, that is one level up in the public folder. when a request in made to '/'. and I CAN'T DO IIIITT,
for several reason:
-I tried to use helmet to workaround Content Security Policy.
-I tried to use the static middleware to do stuff..
-I tried to use the path.join / resolve
So is there anyone who can explain somehow how to send this public/index.html file with the bootstrap scripts/css working ?
Have a nice day
Edit:
Here is the new app.js, it render the index.html thanks to the express.static but bootstrap css/scripts are not rendered :
//export used
var express = require('express'),
url = require("url"),
path = require("path"),
fs = require("fs");
const _port = 3000
var app = express();
app.use(express.static(path.join(__dirname, '/..', 'public')));
app.get('/', function(req, res){
res.sendFile('../public/index.html',{root: __dirname});
});
app.listen(_port, function() { console.log('listening port '+_port+"\n__dirname : "+__dirname)});(I know this question have been asked many times in many form, but I tried a lot of solution and none work the way it should.. So maybe a solution adapted to my work would help me understand.)
Here is the structure of my project.
Here is the index.html :
<!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">
<link rel="stylesheet" href="./../node_modules/bootstrap/dist/css/bootstrap.min.css">
<title>Document</title>
</head>
<body>
<nav class="navbar navbar-default ">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
</div>
</nav>
<script src="../node_modules//bootstrap.min.js"></script>
<script src="./../node_modules/jquery/dist/jquery.js"></script>
</body>
</html>
And here is the server/app.js. I let the res.sendFile(); empty on purpose.
//export used
var express = require('express'),
url = require("url"),
path = require("path"),
fs = require("fs");
const _port = 3000
var app = express();
app.get('/', function(req, res){
res.sendFile();
});
app.listen(_port, function() { console.log('listening port '+_port+"\n__dirname : "+__dirname)});
The purpose of the server for now is just to send the index.html, that is one level up in the public folder. when a request in made to '/'. and I CAN'T DO IIIITT,
for several reason:
-I tried to use helmet to workaround Content Security Policy.
-I tried to use the static middleware to do stuff..
-I tried to use the path.join / resolve
So is there anyone who can explain somehow how to send this public/index.html file with the bootstrap scripts/css working ?
Have a nice day
Edit:
Here is the new app.js, it render the index.html thanks to the express.static but bootstrap css/scripts are not rendered :
//export used
var express = require('express'),
url = require("url"),
path = require("path"),
fs = require("fs");
const _port = 3000
var app = express();
app.use(express.static(path.join(__dirname, '/..', 'public')));
app.get('/', function(req, res){
res.sendFile('../public/index.html',{root: __dirname});
});
app.listen(_port, function() { console.log('listening port '+_port+"\n__dirname : "+__dirname)});2 Answers
Reset to default 4You have to add static middleware just after defining your app and before other routings because it is remended to put static middleware first.
Use the path module to join the paths since it helps to avoid issues of operating systems working differently with slashes and backslashes.
app.use( '/' , express.static(path.join(__dirname ,'..' ,'public'));
By doing this, you can serve all your static files in the public directory including scripts and css.
If you are using express, then you shouldn't serve single file instead you can make a static folder where all your js and css lies and you can serve that whole folder and use angular for routing.
Here is sample code:
var express = require('express'),
url = require("url"),
path = require("path"),
fs = require("fs");
const _port = 3000
var app = express();
app.use('/',express.static(__dirname+'public'));
app.use(bodyParser.json());
app.listen(_port, function() { console.log('listening port '+_port+"\n__dirname : "+__dirname)});
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745223714a4617364.html
评论列表（0条）