Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Steven Ventimiglia
Steven Ventimiglia
27,371 Points
Posted by Steven Ventimiglia
Steven Ventimiglia
27,371 Points

Why am I seeing two occurrences of middleware `one`, `one and a half`, and `two` for any view?

With the loading of any page, I see the numbers twice locally in my terminal - but, not in the video.

So, instead of...

1
1.5
2

...I'm seeing:

1
1.5
2
1
1.5
2

Has anyone else experienced this?

Matthew Griffith
Matthew Griffith
21,003 Points

Could you post the code?

Steven Ventimiglia
Steven Ventimiglia
27,371 Points
Steven Ventimiglia
Steven Ventimiglia
27,371 Points

I'm noticing that it's not doing it in Chrome (which explains why it isn't the result being seen in the video), but I use Firefox as my primary browser since it's my "neutral zone" between Chrome and IE/Edge in terms of cross-compatibility. I checked in Firefox Developer Edition and Firefox - same issue. In Chrome, it only does it once, and I'd like to know why - even if it's a setting I should be aware of in Firefox.

'use strict';

const express = require('express');
const bodyParser = require('body-parser');
const cookieParser = require('cookie-parser');

const app = express();

app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());

// Template Engine
app.set('view engine', 'pug');

// Middleware
app.use((req, res, next) => {
    console.log('1');
    next();
},
(req, res, next) => {
    console.log('1.5');
    next();
});

app.use((req, res, next) => {
    console.log('2');
    next();
});

// Index
app.get('/', (req, res) => {
    // Get 'username' cookie
    const name = req.cookies.username;
    if (name) { 
        res.render('index', {name});
    } else {
        res.redirect('/login')
    }
});

// Login
app.get('/login', (req, res) => {
    // Get 'username' cookie
    const name = req.cookies.username;
    if (name) { 
        res.redirect('/')
    } else {
        res.render('login');
    }
});

app.post('/login', (req, res) => {
    res.cookie('username', req.body.username);
    res.redirect('/');
});

// Logout
app.post('/logout', (req, res) => {
    res.clearCookie('username');
    res.redirect('/login');
});

// Flashcards
const cardColors = [
    'red',
    'white',
    'blue'
];

app.get('/cards', (req, res) => {
    res.locals.title = "Flash Cards";
    res.render('cards', {
        hint: "This is a hint, shhhhhh!",
        colors: cardColors
    });
});

// Server
app.listen(3000, () => {
    console.log("Running on http:localhost:3000");
});

1 Answer

Steven Ventimiglia
Steven Ventimiglia
27,371 Points
Steven Ventimiglia
Steven Ventimiglia
27,371 Points

I found my own answer...

Upon looking at the console > requests log, favicon was giving me a 404 error. By installing npm i serve-favicon --save and adding const favicon = require('serve-favicon'); as well as app.use(favicon(__dirname + '/favicon.ico')); to app.js - I no longer get a 404 that seemed to have given Firefox a case of the hiccups.

The current code is now:

'use strict';

const express = require('express');
const bodyParser = require('body-parser');
const cookieParser = require('cookie-parser');
const favicon = require('serve-favicon');

const app = express();

app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());

// Template Engine
app.set('view engine', 'pug');

// Favicon
app.use(favicon(__dirname + '/favicon.ico'));

// Middleware
app.use((req, res, next) => {
    console.log('1');
    next();
},
(req, res, next) => {
    console.log('1.5');
    next();
});

app.use((req, res, next) => {
    console.log('2');
    next();
});

// Index
app.get('/', (req, res) => {
    // Get 'username' cookie
    const name = req.cookies.username;
    if (name) { 
        res.render('index', {name});
    } else {
        res.redirect('/login')
    }
});

// Login
app.get('/login', (req, res) => {
    // Get 'username' cookie
    const name = req.cookies.username;
    if (name) { 
        res.redirect('/')
    } else {
        res.render('login');
    }
});

app.post('/login', (req, res) => {
    res.cookie('username', req.body.username);
    res.redirect('/');
});

// Logout
app.post('/logout', (req, res) => {
    res.clearCookie('username');
    res.redirect('/login');
});

// Flashcards
const cardColors = [
    'red',
    'white',
    'blue'
];

app.get('/cards', (req, res) => {
    res.locals.title = "Flash Cards";
    res.render('cards', {
        hint: "This is a hint, shhhhhh!",
        colors: cardColors
    });
});

// Server
app.listen(3000, () => {
    console.log("Running on http:localhost:3000");
});

I then added a transparent favicon.ico generated online, to the path defined in app.js (which would normally be in a folder of public assets, like /public/images/favicon.ico.)

Matthew Griffith
Matthew Griffith
21,003 Points

Awesome! Good job! :)