HTML page does not render properly when using express.js

I am just testing to display a home page (index.html page) using express.js. This index page loads/renders perfectly on my browser when I load directly form the browser. However when I tried to load the same page via express.js I do not get the same effect. It just displays all the elements and pictures with its css styling line by line. Can anyone let me know whats missing? The index page I am loading is from a template. Below is the getwebapp.js file with the route. I am only showing the route to the index page only.

getwebapp.js content:

const express = require('express');

const app = express();

const path = require('path');

const router = express.Router();



app.use(express.static(path.join(__dirname + 'public')));



router.get('/', function(req, res) {

    res.sendFile(path.join(__dirname + '/index.html'));});



router.get('/about", function (req, res) {

    res.sendFile(path.join(__dirname + '/about.html'));});



app.use('/', router);

app.listen(8080, () => console.log('Listening on port 8080....'));

console.log('Server started at ' + Date());

index.html content (top half)

<!DOCTYPE html>

<html lang="en">

<head>

    <title>Hello World</title>



    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->

    <link rel="stylesheet" href="css/bootstrap.min.css">

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- Swiper CSS -->

    <link rel="stylesheet" href="css/swiper.min.css">

    <!-- Styles -->

    <link rel="stylesheet" href="style.css">

    <script src="js/custom.js"></script>

</head>

<body>

   <header class="site-header">

     <div class="nav-bar">

        <div class="container">

            <div class="row">

               <div class="col-12 d-flex flex-wrap justify-content-between align-items-center">

                  <div class="site-branding d-flex align-items-center">

                      <a class="d-block" href="index.html" rel="home"><img class="d-block" src="images/logo.png" alt="logo"></a>

                       </div><!-- .site-branding -->



                       <nav class="site-navigation d-flex justify-content-end align-items-center">

                         <ul class="d-flex flex-column flex-lg-row justify-content-lg-end align-items-center">

                                <li class="current-menu-item"><a href="/">Home</a></li>

                                <li><a href="/about">About us</a></li>

                                <li><a href="/services">Services</a></li>

                                <li><a href="/news">News</a></li>

                                <li><a href="/contact">Contact</a></li>



                                <li class="call-btn button gradient-bg mt-3 mt-md-0">

                                    <a class="d-flex justify-content-center align-items-center" href="#"><img src="images/emergency-call.png"> +34 586 778 8892</a>

                                </li>

                            </ul>

                        </nav><!-- .site-navigation -->

edited Jan 25 at 17:38

asked Jan 20 at 3:57

Kish Ranai

It looks like you're just serving static content; you're not running any middleware, you're not doing any template rendering, so: why declare app.get routes at all? Just use app.static and done. Alternatively, if you do want to render from template, don't use res.sendFile, use res.render.

– Mike 'Pomax' Kamermans
Jan 20 at 4:03

add a comment |

getwebapp.js content:

const express = require('express');

const app = express();

const path = require('path');

const router = express.Router();



app.use(express.static(path.join(__dirname + 'public')));



router.get('/', function(req, res) {

    res.sendFile(path.join(__dirname + '/index.html'));});



router.get('/about", function (req, res) {

    res.sendFile(path.join(__dirname + '/about.html'));});



app.use('/', router);

app.listen(8080, () => console.log('Listening on port 8080....'));

console.log('Server started at ' + Date());

index.html content (top half)

<!DOCTYPE html>

<html lang="en">

<head>

    <title>Hello World</title>



    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->

    <link rel="stylesheet" href="css/bootstrap.min.css">

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- Swiper CSS -->

    <link rel="stylesheet" href="css/swiper.min.css">

    <!-- Styles -->

    <link rel="stylesheet" href="style.css">

    <script src="js/custom.js"></script>

</head>

<body>

   <header class="site-header">

     <div class="nav-bar">

        <div class="container">

            <div class="row">

               <div class="col-12 d-flex flex-wrap justify-content-between align-items-center">

                  <div class="site-branding d-flex align-items-center">

                      <a class="d-block" href="index.html" rel="home"><img class="d-block" src="images/logo.png" alt="logo"></a>

                       </div><!-- .site-branding -->



                       <nav class="site-navigation d-flex justify-content-end align-items-center">

                         <ul class="d-flex flex-column flex-lg-row justify-content-lg-end align-items-center">

                                <li class="current-menu-item"><a href="/">Home</a></li>

                                <li><a href="/about">About us</a></li>

                                <li><a href="/services">Services</a></li>

                                <li><a href="/news">News</a></li>

                                <li><a href="/contact">Contact</a></li>



                                <li class="call-btn button gradient-bg mt-3 mt-md-0">

                                    <a class="d-flex justify-content-center align-items-center" href="#"><img src="images/emergency-call.png"> +34 586 778 8892</a>

                                </li>

                            </ul>

                        </nav><!-- .site-navigation -->

edited Jan 25 at 17:38

asked Jan 20 at 3:57

Kish Ranai

It looks like you're just serving static content; you're not running any middleware, you're not doing any template rendering, so: why declare app.get routes at all? Just use app.static and done. Alternatively, if you do want to render from template, don't use res.sendFile, use res.render.

– Mike 'Pomax' Kamermans
Jan 20 at 4:03

add a comment |

getwebapp.js content:

const express = require('express');

const app = express();

const path = require('path');

const router = express.Router();



app.use(express.static(path.join(__dirname + 'public')));



router.get('/', function(req, res) {

    res.sendFile(path.join(__dirname + '/index.html'));});



router.get('/about", function (req, res) {

    res.sendFile(path.join(__dirname + '/about.html'));});



app.use('/', router);

app.listen(8080, () => console.log('Listening on port 8080....'));

console.log('Server started at ' + Date());

index.html content (top half)

<!DOCTYPE html>

<html lang="en">

<head>

    <title>Hello World</title>



    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->

    <link rel="stylesheet" href="css/bootstrap.min.css">

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- Swiper CSS -->

    <link rel="stylesheet" href="css/swiper.min.css">

    <!-- Styles -->

    <link rel="stylesheet" href="style.css">

    <script src="js/custom.js"></script>

</head>

<body>

   <header class="site-header">

     <div class="nav-bar">

        <div class="container">

            <div class="row">

               <div class="col-12 d-flex flex-wrap justify-content-between align-items-center">

                  <div class="site-branding d-flex align-items-center">

                      <a class="d-block" href="index.html" rel="home"><img class="d-block" src="images/logo.png" alt="logo"></a>

                       </div><!-- .site-branding -->



                       <nav class="site-navigation d-flex justify-content-end align-items-center">

                         <ul class="d-flex flex-column flex-lg-row justify-content-lg-end align-items-center">

                                <li class="current-menu-item"><a href="/">Home</a></li>

                                <li><a href="/about">About us</a></li>

                                <li><a href="/services">Services</a></li>

                                <li><a href="/news">News</a></li>

                                <li><a href="/contact">Contact</a></li>



                                <li class="call-btn button gradient-bg mt-3 mt-md-0">

                                    <a class="d-flex justify-content-center align-items-center" href="#"><img src="images/emergency-call.png"> +34 586 778 8892</a>

                                </li>

                            </ul>

                        </nav><!-- .site-navigation -->

edited Jan 25 at 17:38

asked Jan 20 at 3:57

Kish Ranai

getwebapp.js content:

const express = require('express');

const app = express();

const path = require('path');

const router = express.Router();



app.use(express.static(path.join(__dirname + 'public')));



router.get('/', function(req, res) {

    res.sendFile(path.join(__dirname + '/index.html'));});



router.get('/about", function (req, res) {

    res.sendFile(path.join(__dirname + '/about.html'));});



app.use('/', router);

app.listen(8080, () => console.log('Listening on port 8080....'));

console.log('Server started at ' + Date());

index.html content (top half)

<!DOCTYPE html>

<html lang="en">

<head>

    <title>Hello World</title>



    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->

    <link rel="stylesheet" href="css/bootstrap.min.css">

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- Swiper CSS -->

    <link rel="stylesheet" href="css/swiper.min.css">

    <!-- Styles -->

    <link rel="stylesheet" href="style.css">

    <script src="js/custom.js"></script>

</head>

<body>

   <header class="site-header">

     <div class="nav-bar">

        <div class="container">

            <div class="row">

               <div class="col-12 d-flex flex-wrap justify-content-between align-items-center">

                  <div class="site-branding d-flex align-items-center">

                      <a class="d-block" href="index.html" rel="home"><img class="d-block" src="images/logo.png" alt="logo"></a>

                       </div><!-- .site-branding -->



                       <nav class="site-navigation d-flex justify-content-end align-items-center">

                         <ul class="d-flex flex-column flex-lg-row justify-content-lg-end align-items-center">

                                <li class="current-menu-item"><a href="/">Home</a></li>

                                <li><a href="/about">About us</a></li>

                                <li><a href="/services">Services</a></li>

                                <li><a href="/news">News</a></li>

                                <li><a href="/contact">Contact</a></li>



                                <li class="call-btn button gradient-bg mt-3 mt-md-0">

                                    <a class="d-flex justify-content-center align-items-center" href="#"><img src="images/emergency-call.png"> +34 586 778 8892</a>

                                </li>

                            </ul>

                        </nav><!-- .site-navigation -->

javascript html

edited Jan 25 at 17:38

asked Jan 20 at 3:57

Kish Ranai

edited Jan 25 at 17:38

asked Jan 20 at 3:57

Kish Ranai

edited Jan 25 at 17:38

asked Jan 20 at 3:57

Kish Ranai

asked Jan 20 at 3:57

Kish Ranai

asked Jan 20 at 3:57

Kish Ranai

It looks like you're just serving static content; you're not running any middleware, you're not doing any template rendering, so: why declare app.get routes at all? Just use app.static and done. Alternatively, if you do want to render from template, don't use res.sendFile, use res.render.

– Mike 'Pomax' Kamermans
Jan 20 at 4:03

add a comment |

It looks like you're just serving static content; you're not running any middleware, you're not doing any template rendering, so: why declare app.get routes at all? Just use app.static and done. Alternatively, if you do want to render from template, don't use res.sendFile, use res.render.

– Mike 'Pomax' Kamermans
Jan 20 at 4:03

It looks like you're just serving static content; you're not running any middleware, you're not doing any template rendering, so: why declare app.get routes at all? Just use app.static and done. Alternatively, if you do want to render from template, don't use res.sendFile, use res.render.

– Mike 'Pomax' Kamermans
Jan 20 at 4:03

add a comment |

2 Answers
2

active

oldest

votes

You cannot directly render html page with node js (express js). Use express.static . i Have been read how to render html page using express js from this website

Hope this can help you

answered Jan 20 at 4:10

Wicak

17829

when to the website as suggested above and did exactly the same thing no change it only display all the elements with its css styling line by line not rendered as a proper HTML page.

– Kish Ranai
Jan 25 at 17:41

add a comment |

Try setting the header to html

app.get("/", function(req, res) {

    res.type('html');

    res.sendFile(path.join(__dirname, "index.html"));

});

If that doesn't work, try:

app.use(express.static(__dirname + '/public'));

app.use(express.static(__dirname + '/files'));

app.use(express.static(__dirname + '/uploads'));

edited Jan 20 at 4:47

answered Jan 20 at 4:37

Ron Royston

6,19432540

did what as suggested above for both cases output the same thing no change it only display all the elements with its css styling line by line and not rendered as a proper HTML page. –

– Kish Ranai
Jan 25 at 17:42

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54273456%2fhtml-page-does-not-render-properly-when-using-express-js%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

You cannot directly render html page with node js (express js). Use express.static . i Have been read how to render html page using express js from this website

Hope this can help you

answered Jan 20 at 4:10

Wicak

17829

when to the website as suggested above and did exactly the same thing no change it only display all the elements with its css styling line by line not rendered as a proper HTML page.

– Kish Ranai
Jan 25 at 17:41

add a comment |

You cannot directly render html page with node js (express js). Use express.static . i Have been read how to render html page using express js from this website

Hope this can help you

answered Jan 20 at 4:10

Wicak

17829

when to the website as suggested above and did exactly the same thing no change it only display all the elements with its css styling line by line not rendered as a proper HTML page.

– Kish Ranai
Jan 25 at 17:41

add a comment |

You cannot directly render html page with node js (express js). Use express.static . i Have been read how to render html page using express js from this website

Hope this can help you

answered Jan 20 at 4:10

Wicak

17829

You cannot directly render html page with node js (express js). Use express.static . i Have been read how to render html page using express js from this website

Hope this can help you

answered Jan 20 at 4:10

Wicak

17829

answered Jan 20 at 4:10

Wicak

17829

answered Jan 20 at 4:10

Wicak

17829

answered Jan 20 at 4:10

Wicak

17829

when to the website as suggested above and did exactly the same thing no change it only display all the elements with its css styling line by line not rendered as a proper HTML page.

– Kish Ranai
Jan 25 at 17:41

add a comment |

when to the website as suggested above and did exactly the same thing no change it only display all the elements with its css styling line by line not rendered as a proper HTML page.

– Kish Ranai
Jan 25 at 17:41

when to the website as suggested above and did exactly the same thing no change it only display all the elements with its css styling line by line not rendered as a proper HTML page.

– Kish Ranai
Jan 25 at 17:41

add a comment |

Try setting the header to html

app.get("/", function(req, res) {

    res.type('html');

    res.sendFile(path.join(__dirname, "index.html"));

});

If that doesn't work, try:

app.use(express.static(__dirname + '/public'));

app.use(express.static(__dirname + '/files'));

app.use(express.static(__dirname + '/uploads'));

edited Jan 20 at 4:47

answered Jan 20 at 4:37

Ron Royston

6,19432540

did what as suggested above for both cases output the same thing no change it only display all the elements with its css styling line by line and not rendered as a proper HTML page. –

– Kish Ranai
Jan 25 at 17:42

add a comment |

Try setting the header to html

app.get("/", function(req, res) {

    res.type('html');

    res.sendFile(path.join(__dirname, "index.html"));

});

If that doesn't work, try:

app.use(express.static(__dirname + '/public'));

app.use(express.static(__dirname + '/files'));

app.use(express.static(__dirname + '/uploads'));

edited Jan 20 at 4:47

answered Jan 20 at 4:37

Ron Royston

6,19432540

did what as suggested above for both cases output the same thing no change it only display all the elements with its css styling line by line and not rendered as a proper HTML page. –

– Kish Ranai
Jan 25 at 17:42

add a comment |

Try setting the header to html

app.get("/", function(req, res) {

    res.type('html');

    res.sendFile(path.join(__dirname, "index.html"));

});

If that doesn't work, try:

app.use(express.static(__dirname + '/public'));

app.use(express.static(__dirname + '/files'));

app.use(express.static(__dirname + '/uploads'));

edited Jan 20 at 4:47

answered Jan 20 at 4:37

Ron Royston

6,19432540

Try setting the header to html

app.get("/", function(req, res) {

    res.type('html');

    res.sendFile(path.join(__dirname, "index.html"));

});

If that doesn't work, try:

app.use(express.static(__dirname + '/public'));

app.use(express.static(__dirname + '/files'));

app.use(express.static(__dirname + '/uploads'));

edited Jan 20 at 4:47

answered Jan 20 at 4:37

Ron Royston

6,19432540

edited Jan 20 at 4:47

answered Jan 20 at 4:37

Ron Royston

6,19432540

answered Jan 20 at 4:37

Ron Royston

6,19432540

answered Jan 20 at 4:37

Ron Royston

6,19432540

did what as suggested above for both cases output the same thing no change it only display all the elements with its css styling line by line and not rendered as a proper HTML page. –

– Kish Ranai
Jan 25 at 17:42

add a comment |

did what as suggested above for both cases output the same thing no change it only display all the elements with its css styling line by line and not rendered as a proper HTML page. –

– Kish Ranai
Jan 25 at 17:42

did what as suggested above for both cases output the same thing no change it only display all the elements with its css styling line by line and not rendered as a proper HTML page. –

– Kish Ranai
Jan 25 at 17:42

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Brtdku