mdbootsrap not showing up when rendered as view from a express route

Question

I have a simple login view in pug.I've used material design for bootstrap with it.When I try to run as simple html file it is showing up.But when I tried to include all the css,bootstrap,js files to my public folder and render the same via express route,the bootstrap styles nor the js functionalities are working.I have cross checked by changing the paths.

1.I tried to render the by placing the files in the public folder.Then making a express static middleware.But it doesn't work.

2.Even I tried by placing all the files outside the views and tried giving the exact path,but doesn't show up.

3.Then I also tried like ../public/bootstrap.min.css(something like navigating to the public folder from the views folder),not working still.

But when I used cdns it works fine.What's wrong with it.I will submit the code file(something similar to what I am trying).

login.pug

doctype html
html(lang='en')
  head
    meta(charset='utf-8')
    meta(name='viewport', content='width=device-width, initial-scale=1, shrink-to-fit=no')
    meta(http-equiv='x-ua-compatible', content='ie=edge')
    title Material Design Bootstrap
    // Font Awesome
    link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css')
    // Bootstrap core CSS
    link(href='css/bootstrap.min.css', rel='stylesheet')
    // Material Design Bootstrap
    link(href='css/mdb.min.css', rel='stylesheet')
    // Your custom styles (optional)
    link(href='css/style.css', rel='stylesheet')
  style(type='text/css').
    .Absolute-Center {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    }
    .Absolute-Center.is-Responsive {
    width: 50%;
    height: 50%;
    min-width: 200px;
    max-width: 400px;
    padding: 40px;
    }
  body
    // Start your project here
    html.full-height(lang='en')
      body
        .container
          // Material form login
          .card-body
            form
              p.h3.text-center.mb-4  Welcome
              hr(align='center', width='30%')
              p.h4.text-center.mb-4 Log In 
              .input-container.w-50.mx-auto
                // Material input email
                .md-form
                  i.fa.fa-envelope.prefix.grey-text
                  input#materialFormLoginEmailEx.form-control(type='email')
                  label(for='materialFormLoginEmailEx') Email
                // Material input password
                .md-form
                  i.fa.fa-lock.prefix.grey-text
                  input#materialFormLoginPasswordEx.form-control(type='password')
                  label(for='materialFormLoginPasswordEx') Password
              .text-center.mt-4
                button.btn.btn-default(type='submit') Login
              p(style='text-align: center;') Or
              hr(align='rigth', width='30%')
              div(align='center')
                a(href='') Sign In with Google
                p(style='text-align: center;') Don't have an  account?
                a(href='') SignUp now
            // Material form login
    // /Start your project here
    // SCRIPTS
    // JQuery
    script(type='text/javascript', src='js/jquery-3.3.1.min.js')
    // Bootstrap tooltips
    script(type='text/javascript', src='js/popper.min.js')
    // Bootstrap core JavaScript
    script(type='text/javascript', src='js/bootstrap.min.js')
    // MDB core JavaScript
    script(type='text/javascript', src='js/mdb.min.js')

middleware in app.js

// Set Public Folder - to make use of static bootstrap,css files
app.use(express.static(path.join(__dirname, 'public')));

I am getting the page exactly,but only the mdb styles not showing up.Is there any problem with my login.pug code or with paths.Or it's working fine if I use cdn.But will I be able to do all the stuffs with cdn's,the reason why I am asking this is I've noticed some img folder and some additional stuffs in my downloaded mdb folder.Please help.

score 1 · Answer 1 · answered Jun 27 '18 at 17:20

How to debug this problem:

Open up developer tools in chrome, go to the "networks" tab. Reload the page. Look for the 404 of your CSS file. Look at the request URL.

Copy that url. and paste it into your browser. For example:

https://assets-cdn.github.com/assets/github-27937b62110f7615d6f14a9e5939f7c8.css

change app.use(express.static(path.join(__dirname, 'public'))); and the url href in your pug file until you get it to work as you intended.

You might see something like www.yoursite.com/login/css/bootstrap.min.css which is wrong. Maybe you need to change your href to be /css/yourfile.min.css instead of css/yourfile.min.css

When you use app.use(express.static(path.join(__dirname, 'public'))); I am pretty sure it is not serving from /public but from / So you should not need to do something like /public/css/yourfile.min.css

However, in your middleware file you could do something like

app.use('/css', express.static(path.join(__dirname,'/public/css/'));

If you only wanted to serve from that directory.

mdbootsrap not showing up when rendered as view from a express route

1 Answers1