Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Steven Ventimiglia
Steven Ventimiglia
27,369 Points
Posted by Steven Ventimiglia
Steven Ventimiglia
27,369 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,002 Points

Could you post the code?

Steven Ventimiglia
Steven Ventimiglia
27,369 Points
Steven Ventimiglia
Steven Ventimiglia
27,369 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,369 Points
Steven Ventimiglia
Steven Ventimiglia
27,369 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,002 Points

Awesome! Good job! :)