Javascript Notes (Frontend)

FRONTEND

---

Pt. 1 - NextJS

Installation and Set-Up

• Ensure you have all necessary components in the right folder
  • Downloading Node.js is dependent on your device and how you will run it (check it out here).
    • This guide will focus on local Linux installation via an .xyz binary file that was then relocated to another file and opened through running tar -xJf [INSERT BINARY FILE].
  • Specific troubleshooting should be done through communicating with Modelworks team members or searching the internet.
• Run the following in your terminal:

npx create-next-app@latest

• Answer the following questions according to what you will be looking for:

use your arrow keys to switch between 'No' or 'Yes'

What is your project named? [INSERT NAME]
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`?  No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*

• After this, you can move into your app directory (in order to access to package.json file):

cd [INSERT NAME]

• You might also need to run the following for a .next directory:

npm install next

• And then run the following:

you may need to run this with --turbopack if you have enabled this in the initial set-up (see the step before the previous one)*

npm run dev

• After this, you will be able to find your page at http://localhost:3000/ (demonstration is below):

• If port 3000 is unavailable, NextJS will automatically move to the next available one (in this case, it's port 3001):

Making Pages

NextJS is unique in a sense that it has a live editing option. You can see changes in real time by visiting your default homepage file (under [INSERT NAME]/app/page.tsx).

That being said, it is in React, meaning that you can condense both code (Javascript) and GUI (HTML/CSS) in the same file. You can easily learn React (and by extension, HTML, CSS, and Javascript) through sources online (such as this one).

However, if you are lost for time, here is a quick rundown on how your page.tsx file should be set up (with references to HTML, CSS, and Vanilla Javascript):

// insert any imports here

// establish any interfaces here

export default function [INSERT NAME OF PAGE HERE]() {
  // establish your javascript const variables

  // insert your javascript functions

  return (

    // insert your HTML and CSS here

    // HTML/CSS layout takes a slightly different approach, as seen below:
    
    /*
    <div className=[INSERT ANY NECESSARY CSS STYLING HERE (think of it like how you'd establish CSS styling via the "style=" attribute within a HTML tag]>
      // insert your content here
    </div>
    */
  );
}

Tips and Tricks

If you want to keep your files separate, you can do so by making a separate page, and then importing the page under a variable name.

For instance, if you would like to separate your CSS you can do the following:

[IN [INSERT NAME]/app/page.module.css:]

// insert all CSS styling like you would with an average CSS file:
.message {
  align-self: flex-end;
  color: white;
  background-color: blue;
}

[IN [INSERT NAME]/app/page.tsx:]

// first, import the CSS file you made under a variable name (e.g. "styles")
import styles from './page.module.css';

// after this, where your HTMl elements are located, you can now call them via the variable name like so:
<div className={styles.message}>
.
.
.

---

FINAL CHOICE

After going through three possible frontend options, a decision matrix was made to finalise our choice:

Option	recommended	currently working on all devices	easy to set up	Final
Gradio	+ (Stakeholder), - (Team member x 2)	-	+	-1
Open WebUI	+ (Stakeholder), - (Team member)	-	-	-2
NextJS	+ (Stakeholder), + (Tutor), + (Team member)	-	-	1

This is why NextJS is Modelworks' current frontend choice.