Replace Nodemon with node --watch

Author: vejol

src/content/3/en/part3a.md

@@ -356,71 +356,39 @@ The experiment shown below illustrates this point:
 
 The experiment above was done in the interactive [node-repl](https://nodejs.org/docs/latest-v18.x/api/repl.html). You can start the interactive node-repl by typing in _node_ in the command line. The repl is particularly useful for testing how commands work while you're writing application code. I highly recommend this!
 
-### nodemon
+### Automatic Change Tracking
 
-If we make changes to the application's code we have to restart the application to see the changes. We restart the application by first shutting it down by typing _Ctrl+C_ and then restarting the application. Compared to the convenient workflow in React where the browser automatically reloaded after changes were made, this feels slightly cumbersome.
+If we change the application's code, we first need to stop the application from the console (_ctrl_ + _c_) and then restart it for the changes to take effect. Restarting feels cumbersome compared to React's smooth workflow, where the browser automatically updates when the code changes.
 
-The solution to this problem is [nodemon](https://github.com/remy/nodemon):
-
-> <i>nodemon will watch the files in the directory in which nodemon was started, and if any files change, nodemon will automatically restart your node application.</i>
-
-Let's install nodemon by defining it as a <i>development dependency</i> with the command:
-
-```bash
-npm install --save-dev nodemon
-```
-
-The contents of <i>package.json</i> have also changed:
-
-```json
-{
-  //...
-  "dependencies": {
-    "express": "^4.21.2"
-  },
-  "devDependencies": {
-    "nodemon": "^3.1.9"
-  }
-}
-```
-
-If you accidentally used the wrong command and the nodemon dependency was added under "dependencies" instead of "devDependencies", then manually change the contents of <i>package.json</i> to match what is shown above.
-
-By development dependencies, we are referring to tools that are needed only during the development of the application, e.g. for testing or automatically restarting the application, like <i>nodemon</i>.
-
-These development dependencies are not needed when the application is run in production mode on the production server (e.g. Fly.io or Heroku).
-
-We can start our application with <i>nodemon</i> like this:
+You can make the server track our changes by starting it with the _--watch_ option:
 
 ```bash
-node_modules/.bin/nodemon index.js
+node --watch index.js
 ```
 
-Changes to the application code now cause the server to restart automatically. It's worth noting that even though the backend server restarts automatically, the browser still has to be manually refreshed. This is because unlike when working in React, we don't have the [hot reload](https://gaearon.github.io/react-hot-loader/getstarted/) functionality needed to automatically reload the browser.
+Now, changes to the application's code will cause the server to restart automatically. Note that although the server restarts automatically, you still need to refresh the browser. Unlike with React, we do not have, nor could we have, a hot reload functionality that updates the browser in this scenario (where we return JSON data).
 
-The command is long and quite unpleasant, so let's define a dedicated <i>npm script</i> for it in the <i>package.json</i> file:
+Let's define a custom <i>npm script</i> in the <i>package.json</i> file to start the development server:
 
 ```bash
 {
   // ..
   "scripts": {
     "start": "node index.js",
-    "dev": "nodemon index.js",  // highlight-line
+    "dev": "node --watch index.js", // highlight-line
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ..
 }
 ```
 
-In the script there is no need to specify the <i>node\_modules/.bin/nodemon</i> path to nodemon, because _npm_ automatically knows to search for the file from that directory.
-
-We can now start the server in development mode with the command:
+We can now start the server in development mode with the command
 
 ```bash
 npm run dev
 ```
 
-Unlike with the <i>start</i> and <i>test</i> scripts, we also have to add <i>run</i> to the command because it is a non-native script.
+Unlike when running the <i>start</i> or <i>test</i> scripts, the command must include <i>run</i>. 
 
 ### REST
 
@@ -615,11 +583,11 @@ Before we implement the rest of the application logic, let's verify with Postman
 
 The application prints the data that we sent in the request to the console:
 
-![terminal printing content provided in postman](../../images/3/15new.png)
+![terminal printing content provided in postman](../../images/3/15c.png)
 
-**NB** <i>Keep the terminal running the application visible at all times</i> when you are working on the backend. Thanks to Nodemon any changes we make to the code will restart the application. If you pay attention to the console, you will immediately be able to pick up on errors that occur in the application:
+**NOTE:** When programming the backend, <i>keep the console running the application visible at all times</i>. The development server will restart if changes are made to the code, so by monitoring the console, you will immediately notice if there is an error in the application's code:
 
-![nodemon error as typing requre not defined](../../images/3/16e.png)
+![console error about SyntaxError](../../images/3/16_25.png)
 
 Similarly, it is useful to check the console to make sure that the backend behaves as we expect it to in different situations, like when we send data with an HTTP POST request. Naturally, it's a good idea to add lots of <em>console.log</em> commands to the code while the application is still being developed.
 
@@ -633,7 +601,7 @@ The <i>Content-Type</i> header is set to <i>text/plain</i>:
 
 The server appears to only receive an empty object:
 
-![nodemon output showing empty curly braces](../../images/3/19.png)
+![console output showing empty curly braces](../../images/3/19_25.png)
 
 The server will not be able to parse the data correctly without the correct value in the header. It won't even try to guess the format of the data since there's a [massive amount](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types) of potential <i>Content-Types</i>.
 

src/content/3/en/part3c.md

@@ -41,12 +41,6 @@ Debugging is also possible with the Chrome developer console by starting your ap
 node --inspect index.js
 ```
 
-You can also pass the `--inspect` flag to `nodemon`:
-
-```bash
-nodemon --inspect index.js
-```
-
 You can access the debugger by clicking the green icon - the node logo - that appears in the Chrome developer console:
 
 ![dev tools with green node logo icon](../../images/3/37.png)

src/content/3/en/part3d.md

@@ -337,7 +337,6 @@ It is recommended to create a separate _npm script_ for linting:
   // ...
   "scripts": {
     "start": "node index.js",
-    "dev": "nodemon index.js",
     // ...
     "lint": "eslint ." // highlight-line
   },

src/content/3/fi/osa3a.md

@@ -353,67 +353,32 @@ Seuraava interaktiivisessa [node-repl](https://nodejs.org/docs/latest-v8.x/api/r
 
 Saat käynnistettyä interaktiivisen node-repl:in kirjoittamalla komentoriville _node_. Komentojen toimivuutta on koodatessa kätevä kokeilla konsolissa, suosittelen!
 
-### nodemon
+### Muutoksien automaattinen seuraaminen
 
 Jos muutamme sovelluksen koodia, joudumme ensin sulkemaan sovelluksen konsolista (_ctrl_ + _c_) ja sitten käynnistämään sovelluksen uudelleen, jotta muutokset tulevat voimaan. Uudelleenkäynnistely tuntuu kömpelöltä verrattuna Reactin mukavaan workflow'hun, jossa selain päivittyi automaattisesti koodin muuttuessa.
 
-Ongelmaan on ratkaisu nimeltä [nodemon](https://github.com/remy/nodemon):
-
-> <i>nodemon will watch the files in the directory in which nodemon was started, and if any files change, nodemon will automatically restart your node application.</i>
-
-Asennetaan nodemon määrittelemällä se <i>kehitysaikaiseksi riippuvuudeksi</i> (development dependency) komennolla:
+Palvelimen saa seuraamaan tekemiämme muutoksia, kun sen käynnistää käyttäen _--watch_-optiota:
 
 ```bash
-npm install --save-dev nodemon
-```
-
-Tiedoston <i>package.json</i> sisältö muuttuu seuraavasti:
-
-```json
-{
-  //...
-  "dependencies": {
-    "express": "^4.21.2"
-  },
-  "devDependencies": {
-    "nodemon": "^3.1.9"
-  }
-}
+node --watch index.js
 ```
 
-Jos nodemon-riippuvuus kuitenkin meni sovelluksessasi normaaliin "dependencies"-ryhmään, päivitä <i>package.json</i> manuaalisesti vastaamaan yllä näkyvää (kuitenkin versiot säilyttäen).
-
-Kehitysaikaisilla riippuvuuksilla tarkoitetaan työkaluja, joita tarvitaan ainoastaan sovellusta kehitettäessä esim. testaukseen tai sovelluksen automaattiseen uudelleenkäynnistykseen kuten <i>nodemon</i>.
-
-Kun sovellusta suoritetaan tuotantomoodissa eli samoin kuin sitä tullaan suorittamaan tuotantopalvelimella (esim. Fly.io:ssa, johon tulemme kohta siirtämään sovelluksemme), ei kehitysaikaisia riippuvuuksia tarvita.
-
-Voimme käynnistää ohjelman <i>nodemonilla</i> seuraavasti:
-
-```bash
-node_modules/.bin/nodemon index.js
-```
-
-Huom: komennon tämä muoto ei välttämättä toimi Windowsilla. Se ei kuitenkaan haittaa sillä 5 sentin päästä kerrotaan komennosta parempi muoto.
-
 Sovelluksen koodin muutokset aiheuttavat nyt automaattisen palvelimen uudelleenkäynnistymisen. Kannattaa huomata, että vaikka palvelin uudelleenkäynnistyy automaattisesti, selain täytyy kuitenkin refreshata, sillä toisin kuin Reactin yhteydessä, meillä ei nyt ole eikä tässä skenaariossa (jossa palautamme JSON-muotoista dataa) edes voisikaan olla selainta päivittävää [hot reload](https://gaearon.github.io/react-hot-loader/getstarted/) ‑toiminnallisuutta.
 
-
-Komento on ikävä, joten määritellään sitä varten <i>npm-skripti</i> tiedostoon <i>package.json</i>:
+Määritellään kehityspalvelimen käynnistämistä varten oma <i>npm-skripti</i> tiedostoon <i>package.json</i>:
 
 ```bash
 {
   // ..
   "scripts": {
     "start": "node index.js",
-    "dev": "nodemon index.js", // highlight-line
+    "dev": "node --watch index.js", // highlight-line
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ..
 }
 ```
 
-Skriptissä ei ole tarvetta käyttää nodemonin polusta sen täydellistä muotoa <i>node\_modules/.bin/nodemon</i> sillä _npm_ osaa etsiä automaattisesti suoritettavaa tiedostoa kyseisestä hakemistosta.
-
 Voimme nyt käynnistää palvelimen sovelluskehitysmoodissa komennolla
 
 ```bash
@@ -605,11 +570,11 @@ Ennen toimintalogiikan viimeistelyä varmistetaan ensin Postmanilla, että lähe
 
 Sovellus tulostaa lähetetyn vastaanottamansa datan terminaaliin:
 
-![Konsoliin tulostuu palvelimen vastaanottama json-objekti](../../images/3/15new.png)
+![Konsoliin tulostuu palvelimen vastaanottama json-objekti](../../images/3/15c.png)
 
-**HUOM:** Kun ohjelmoit backendia, <i>pidä sovellusta suorittava konsoli koko ajan näkyvillä</i>. Nodemonin ansiosta sovellus käynnistyy uudelleen jos koodiin tehdään muutoksia. Jos seuraat konsolia, huomaat välittömästi jos sovelluksen koodiin tulee virhe:
+**HUOM:** Kun ohjelmoit backendia, <i>pidä sovellusta suorittava konsoli koko ajan näkyvillä</i>. Kehityspalvelin käynnistyy uudelleen, jos koodiin tehdään muutoksia, joten jos seuraat konsolia, huomaat välittömästi jos sovelluksen koodiin tulee virhe:
 
-![konsoliin tulostuu epävalidista javascriptistä johtuva parse error ‑virheilmoitus](../../images/3/16e.png)
+![konsoliin tulostuu epävalidista javascriptistä johtuva parse error ‑virheilmoitus](../../images/3/16_25.png)
 
 Konsolista kannattaa seurata myös, reagoiko backend odotetulla tavalla esim. kun sovellukselle lähetetään dataa metodilla HTTP POST. Backendiin kannattaa luonnollisesti lisäillä runsaat määrät <em>console.log</em>-komentoja kun sovellus on kehitysvaiheessa. 
 
@@ -623,7 +588,7 @@ Headerin <i>Content-Type</i> arvoksi asettuu <i>text/plain</i>:
 
 Palvelin näyttää vastaanottavan ainoastaan tyhjän olion:
 
-![Konsoliin tulostuu tyhjä json](../../images/3/19.png)
+![Konsoliin tulostuu tyhjä json](../../images/3/19_25.png)
 
 Ilman oikeaa headerin arvoa palvelin ei osaa parsia dataa oikeaan muotoon. Se ei edes yritä arvailla missä muodossa data on, sillä potentiaalisia datan siirtomuotoja eli <i>Content-Typejä</i> on olemassa [suuri määrä](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types).