Merge pull request #879 from NalinDalal/fix-on-2.0

solves docs issue 837 for p5.js 2.x

Author: perminder-17

src/content/tutorials/en/getting-started-with-nodejs.mdx.todo renamed to src/content/tutorials/en/getting-started-with-nodejs.mdx

@@ -7,14 +7,14 @@ featuredImage: ../images/featured/node.png
 featuredImageAlt: A p5.js logo with musical notes above it has arrows labeled with HTTP methods pointing to a cloud labeled “Internet”. Above the cloud is an icon that reads “http\://”. Arrows point from the cloud to a pink cube labeled “Web Server” with the Node.js logo above it.
 relatedContent:
   references:
-   - en/p5/preload
+   - en/p5/async_await
    - en/p5/loadjson
 authors:
   - Layla Quiñones
   - Nick McIntyre
 ---
 
-In this guide, we'll explore the fusion of p5.js and [Node.js](http://node.js) to create dynamic applications that save and retrieve user-generated drawings, animations, and sound projects! For example, you can create a [Simple Melody App](/tutorials/simple-melody-app/) where you save files with melodies you create by interacting with the canvas! Node.js allows you to easily save, replay, and edit these files right from your browser!
+In this guide, we'll explore the fusion of p5.js and [Node.js](http://nodejs.org) to create dynamic applications that save and retrieve user-generated drawings, animations, and sound projects! For example, you can create a [Simple Melody App](/tutorials/simple-melody-app/) where you save files with melodies you create by interacting with the canvas! Node.js allows you to easily save, replay, and edit these files right from your browser!
 
 
 ![A p5.js logo with musical notes above it has arrows labeled with HTTP methods pointing to a cloud labeled “Internet”. Above the cloud is an icon that reads “http://”. Arrows point from the cloud to a pink cube labeled “Web Server” with the Node.js logo above it.](../images/advanced/node.png)
@@ -175,37 +175,31 @@ let fs = require('fs');
 
 // API endpoint to get list of songs
 app.get('/songs', (req, res) => {
-  fs.readdir('songs', (err, files) => {
-    if (err) {
-      res.status(500).send('Error reading song files');
-    } else {
-      res.json({ files });
-    }
-  });
+  fs.readdir('songs', (err, files) => {
+    if (err) {
+      res.status(500).send('Error reading song files');
+    } else {
+      res.json({ files });
+    }
+  });
 });
 ```
 
 The code above initializes the [file system module (`fs`)](https://nodejs.org/api/fs.html), which provides APIs that help users interact with file systems on their computers. It also uses the `app.get()` method, which handles GET HTTP requests to the `/songs`  URL. Here you use the file system module to read filenames from the folder, parse them as a JSON object, and send them in the response to the GET request.
 
 Now that you have instructed the GET request on how to read the songs folder filenames, we can upload filenames as a JSON object in `sketch.js`.
 
-- Use `preload()` and `loadJSON()` to load files from the songs folder in a global variable named `songs`. Visit the [p5.js reference](/reference) to learn more about [`preload()`](/reference/p5/preload) and [`loadJSON()`](/reference/p5/loadJSON).
-- Use `console.log(songs)` in `setup()` to print the contents of the JSON array.
+**Note:** In p5.js 2.x, the `preload()` function and synchronous loading methods have been removed. Instead, you should use `async`/`await` and the browser's `fetch` API to load data before using it in your sketch. Here is how you can update your `sketch.js`:
 
-Your sketch.js file should look like this:
 
 ```js
-//variable for JSON object with file names
 let songs;
 
-function preload() {
-  //load and save the songs folder as JSON
-  songs = loadJSON("/songs");
-}
-
-function setup() {
-  createCanvas(400, 400);
-  console.log(songs)
+async function setup() {
+  createCanvas(400, 400);
+  // Fetch the list of songs from the server via loadJSON
+  songs = await loadJSON('/songs');
+  console.log(songs);
 }
 
 function draw() {
@@ -216,13 +210,11 @@ function draw() {
 View your browser’s console to make sure the output of the `songs` variable looks something like this:
 
 ```
-Object i
-  files: Array(3)
-    0: "C Major Scale.json"
-    1: "Frere Jacques.json"
-    2: "Mary's Lamb.json"
-    length: 3
-// ...prototype
+{ files: [
+  "C Major Scale.json",
+  "Frere Jacques.json",
+  "Mary's Lamb.json"
+] }
 ```
 
 Now you are ready to build the [Melody App](https://docs.google.com/document/u/0/d/1mzJv-7qU1_CmkWI0ZFeqf3CeBfpOOVIrvPRZtxqFxRI/edit)! You can access completed code for this guide in [this Github repository](https://github.com/MsQCompSci/melodyAppNodeStarter/tree/main).