diff --git a/src/content/tutorials/en/getting-started-with-nodejs.mdx.todo b/src/content/tutorials/en/getting-started-with-nodejs.mdx similarity index 91% rename from src/content/tutorials/en/getting-started-with-nodejs.mdx.todo rename to src/content/tutorials/en/getting-started-with-nodejs.mdx index bf56c00af7..0241d150f5 100644 --- a/src/content/tutorials/en/getting-started-with-nodejs.mdx.todo +++ b/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,13 +175,13 @@ 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 }); + } + }); }); ``` @@ -189,23 +189,17 @@ The code above initializes the [file system module (`fs`)](https://nodejs.org/ap 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).