Day 2: Web Development

Day 2 - Debugging (already)

Vision

I thought today I'd get to finish building the home page, but as soon as I sat down to execute npm run dev, the application crashed and I was served

[Error: UNKNOWN: unknown error, readlink 'C:\Users\colby\OneDrive\Desktop\chowder-kettle\chowder-kettle-web\.next\static\webpack\pages'] {
errno: -4094,
code: 'UNKNOWN',
syscall: 'readlink',
path: 'C:\\Users\\colby\\OneDrive\\Desktop\\chowder-kettle\\chowder-kettle-web\\.next\\static\\webpack\\pages'
}

I'd encountered this same error weeks ago when finishing the Next.js tutorial included on their website. I chose to dig deeper on the matter this time around.

Debugging

After some fruitless googling, I followed the file path C:\\Users\\colby\\OneDrive\\Desktop\\chowder-kettle\\chowder-kettle-web\\.next\\static\\webpack\\pages and discovered a series of inscrutable files therein. I was able to extract some plain text from these files which returned results directing me towards configuring my debugger in VS Code. I created a file in the root of the project's directory .vscode/launch.json and added in the following code to the file:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Next.js: debug server-side",
            "type": "node-terminal",
            "request": "launch",
            "command": "npm run dev"
        },
        {
            "name": "Next.js: debug client-side",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:3000"
        },
        {
            "name": "Next.js: debug full stack",
            "type": "node-terminal",
            "request": "launch",
            "command": "npm run dev",
            "serverReadyAction": {
                "pattern": "started server on .+, url: (https?://.+)",
                "uriFormat": "%s",
                "action": "debugWithChrome"
            }
        }
    ]
}

Following directions found on Stack Overflow, I ran the dubugging console and was ultimately returned the message "autoprefixer: start value has mixed support, consider using flex-start instead". I went into the Home.modules.css file I'd created for the NavBar yesterday and updated display: flex; justify-content: start; align-items: start to display: flex; justify-content: flex-start; align-items: flex-start. This circumvented the matter and got the development environment properly running.

Home Page

Debugging took me about two hours to work through, and after I began building a Profile component, I quickly realized that I would need to pull data from Firebase if I wanted to authentically model this component in development (As I write this, I realize that I could also hard-code in values to placehold for data; potential route to pursue tomorrow). This line of thought pulled me towards configuring user authentication, and that matter led into my currently non-existent login page. Tomorrow I plan to begin with building the login page and ensuring user authentication is properly configured.

Takeaways

One thing I realized towards the end of my work day was that I'd left yesterday's terminal session still running. Scrolling through it, I began to discover that when I was still working yesterday, I'd received a series of warnings that explained the issue the compiler was having with start vs. flex-start. While in live development, the compiler was able to reconcile the issue, when I was trying to reload the development environment, the compiler would not move past the issue it was encountering. Essentially, if I had paid more attention to the warnings I was receiving, I would have saved the time I spent deciphering a far more complex error message.

Additionally, I realize I need to approach developing the application more programmatically. Whereas yesterday I came in with the set goal of designing the navbar component, today I set myself the broader task of designing the remainder of the homepage. I ignored my concern about the need to pull data, and as soon as I encountered that issue, I was stunted in my ability to immediately move forward. When planning my days, I must ensure I am staying granular so that development continues to move forward, so that days and hours are not lost to incessant reorientation.