Where to view console.log output using nodejs/npm start?

Question

very new to react/node/using npm start to start a server. Using npm start to start the server works and displays my react code, but I need to do some debugging. However, my console.logs aren't outputting to the browser console. After that, I thought to check my terminal (which i think is where node console.log outputs to), but since I used npm start, the terminal that I launched the application from is stuck on this screen:

Compiled successfully!

You can now view my-app in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://[ip_address_here]:3000/

Note that the development build is not optimized.
To create a production build, use npm run build.

And therefore, I cannot read any console output on this screen. I feel like this should be a super basic fix and I'm probably just overlooking something extremely obvious, but could somebody help me out here? Thanks.

EDIT: I was asked to share some code, here it is:

Here is a snippet of my App.js file:

import React from 'react';

//quick class
class App extends React.Component {
    constructor(props){
        super(props);

        this.state = {
            testRows : null
        }

        this.getTest = this.getTest.bind(this);
    }

    //get some rows from my api using a local database with sqlite3
    async getTest(){
        try{
            console.log("hello?");
            const response = await fetch('http://localhost:3000/api/test');
            if(response.ok){
                const JSONresponse = response.json();
                console.log(JSOnresponse);
                this.setState({testRows : JSONresponse});
            }
            else{
                this.setState({testRows: "test error"});
                console.log('There was an error with the fetch');
            }
        }
        catch(error){
            console.log(error);
        }
    }

    //render some text, a button, and the result
    render(){
        let testResults;
        if(this.state.testRows){
            testResults = Object.keys(this.state.testRows).map((data) => {
                    return <h1>{data.name}</h1>
                }
            )
        }
        else{
            testResults = "null";
        }


        return(
            <div>
                <h2>Some testing going on here</h2>
                <button onClick={this.getTest}>
                    Press me for test!
                </button>
                <h3>{testResults}</h3>
            </div>
        );
    }
}

export default App;

Here is a snippet of my api.js file:

apiRouter.get('/test', (req, res, next) => {
    db.get('SELECT * FROM Test', (error, rows) => {
        if(error){
            console.log(error);
        }
        else{
            console.log("got the test");
            console.log(rows);
            res.send(rows);
        }
    })
})

The router is mounted and everything else in other parts of the code, but the console.logs there don't show up anywhere (dev tools console or terminal) either.

Answer 1

From what I understood you have two pieces of code running in different places. Both should be served in order to execute the code.

The App.js file seems to be a React App (frontend) that should run on the browser. To see the console messages you should:

• Open the terminal and serve the App: npm start
• Open the browser
• Visit the URL indicated
• Open the Developer Tools (usually F12)

Also, try to place the log right after the class declaration or somewhere else to isolate possible other problems.

The api.js on the other hand is a backend code, so the console messages should be logged in the terminal where it is running. Assuming you have the complete file api.js and not just that snippet, to run the server and see the logs you should:

• On the terminal and serve the API: node api.js
• Open the browser
• Visit the URL indicated
• The message will show up on the terminal

I will do the same recommendation, if you place the log command at the beginning of the script the message will be shown as the server start, without the need to go to the browser. Isolating problems is a good way to tackle them.

If you don't have the full api.js, try a simple snippet: Getting Started. Just add the console.log('Console says hi!') at the beginning, or after the "Hello World" line if you want to see it after opening the browser.

A final remark would be to make sure front and back are not being served on the same port (3000).