vite parts 2-3

Author: mluukkai

src/content/0/en/part0a.md

@@ -340,7 +340,7 @@ Despite changes <i>all the submitted exercises remain valid</i>, and the course
 
 Recent major changes
 
-- Parts 1 and 2 (11-14th August): Create React app replaced with Vite
+- Parts 1-3 (11-14th August): Create React app replaced with Vite
 
 ### Expanding on a previously completed course
 

src/content/0/fi/osa0a.md

@@ -282,7 +282,7 @@ Kurssilla ei ole enää vuosittaisia versiota. Kurssi on siis käynnissä koko a
 Muutoksista huolimatta <i>kaikki jo tehdyt palautukset säilyvät voimassa</i>, eli voit jatkaa kurssia päivityksistä huolimatta normaaliin tapaan.
 
 Viimeaikaisia isompia muutoksia
-- Osat 1 ja 2 (11-14.8.2023): Create React app korvattu Vitellä
+- Osat 1-3 (11-14.8.2023): Create React app korvattu Vitellä
 
 ### Aiemmin suoritetun kurssin täydentäminen
 

src/content/1/fi/osa1.md

@@ -9,6 +9,6 @@ lang: fi
 Alamme tässä osassa tutustua React-kirjastoon, jolla siis teemme sovelluksen selaimessa suoritettavan koodin. Teemme samalla myös nopean katsauksen Javascriptin Reactin kannalta oleellisimpiin ominaisuuksiin.
 
 <i>Osa päivitetty 11.8.2023</i>
-- <i>Create React App rkorvattu Vitellä</i>
+- <i>Create React App korvattu Vitellä</i>
 
 </div>

src/content/3/en/part3.md

@@ -8,7 +8,7 @@ lang: en
 
 In this part our focus shifts towards the backend, that is, towards implementing functionality on the server side of the stack. We will implement a simple REST API in Node.js by using the Express library, and the application's data will be stored in a MongoDB database. At the end of this part, we will deploy our application to the internet.
 
-<i>Part updated 19th Jan 2023</i>
-- <i>Added instructions for [https://render.com/](https://render.com/) hosting platform</i>
+<i>Part updated 14th August 2023</i>
+- <i>Create React App replaced with Vite</i>
 
 </div>

src/content/3/en/part3b.md

@@ -146,38 +146,25 @@ Give the app a name or let Fly.io auto-generate one. Pick a region where the app
 
 The last question is "Would you like to deploy now?". We should answer "no" since we are not quite ready yet.
 
-Fly.io creates a file <i>fly.toml</i> in the root of your app where the app is configured. To get the app up and running we <i>might</i> need to do a small addition to the part [env] of the configuration:
+Fly.io creates a file <i>fly.toml</i> in the root of your app where the app is configured. To get the app up and running we <i>might</i> need to do a small addition to the configuration:
 
 ```bash
-[env]
-  PORT = "8080" # add this
+[build]
 
-[experimental]
-  auto_rollback = true
+[env]
+  PORT = "3000" # add this
 
-[[services]]
-  http_checks = []
-  internal_port = 8080 
+[http_service]
+  internal_port = 3000 # ensure that this is same as PORT
+  force_https = true
+  auto_stop_machines = true
+  auto_start_machines = true
+  min_machines_running = 0
   processes = ["app"]
 ```
 
 We have now defined in the part [env] that environment variable PORT will get the correct port (defined in part [services]) where the app should create the server. Note that the definition might be already there, but some times it has been missing.
 
-Note: For some users, the fly.toml file generated by fly.io will have this configuration:
-
-```bash
-[http_service]
-  internal_port = 3000
-```
-
-This will cause the following warning once deployed and result in your app being inacessible:
-
-```bash
-WARNING The app is not listening on the expected address and will not be reachable by fly-proxy
-```
-
-Change internal_port to 8080 if your configuration is as mentioned above.
-
 We are now ready to deploy the app to the Fly.io servers. That is done with the following command:
 
 ```bash
@@ -190,12 +177,6 @@ If all goes well, the app should now be up and running. You can open it in the b
 fly open
 ```
 
-After the initial setup, when the app code has been updated, it can be deployed to production with the command
-
-```bash
-fly deploy
-```
-
 A particularly important command is _fly logs_. This command can be used to view server logs. It is best to keep logs always visible!
 
 **Note:** In some cases (the cause is so far unknown) running Fly.io commands especially on Windows WSL has caused problems. If the following command just hangs
@@ -218,6 +199,13 @@ $ flyctl ping -o personal
 
 then there are no connection problems!
 
+Whenever you make changes to the application, you can take the new version to production with a command
+
+```bash
+fly deploy
+```
+
+
 #### Render
 
 The following assumes that the [sign in](https://dashboard.render.com/) has been made with a GitHub account.
@@ -263,13 +251,13 @@ app.listen(PORT, () => {
 
 So far we have been running React code in <i>development mode</i>. In development mode the application is configured to give clear error messages, immediately render code changes to the browser, and so on.
 
-When the application is deployed, we must create a [production build](https://reactjs.org/docs/optimizing-performance.html#use-the-production-build) or a version of the application which is optimized for production.
+When the application is deployed, we must create a [production build](https://vitejs.dev/guide/build.html) or a version of the application which is optimized for production.
 
-A production build of applications created with <i>create-react-app</i> can be created with the command [npm run build](https://github.com/facebookincubator/create-react-app#npm-run-build-or-yarn-build).
+A production build of applications created with Vite can be created with the command [npm run build](https://vitejs.dev/guide/build.html).
 
 Let's run this command from the <i>root of the notes frontend project</i> that we developed in [Part 2](/en/part2).
 
-This creates a directory called <i>build</i> (which contains the only HTML file of our application, <i>index.html</i> ) which contains the directory <i>static</i>. [Minified](<https://en.wikipedia.org/wiki/Minification_(programming)>) version of our application's JavaScript code will be generated in the <i>static</i> directory. Even though the application code is in multiple files, all of the JavaScript will be minified into one file. All of the code from all of the application's dependencies will also be minified into this single file.
+This creates a directory called <i>dist</i> (which contains the only HTML file of our application, <i>index.html</i> ) which contains the directory <i>assets</i>. [Minified](<https://en.wikipedia.org/wiki/Minification_(programming)>) version of our application's JavaScript code will be generated in the <i>dist</i> directory. Even though the application code is in multiple files, all of the JavaScript will be minified into one file. All of the code from all of the application's dependencies will also be minified into this single file.
 
 The minified code is not very readable. The beginning of the code looks like this:
 
@@ -284,24 +272,24 @@ One option for deploying the frontend is to copy the production build (the <i>bu
 We begin by copying the production build of the frontend to the root of the backend. With a Mac or Linux computer, the copying can be done from the frontend directory with the command
 
 ```bash
-cp -r build ../backend
+cp -r dist ../backend
 ```
 
 If you are using a Windows computer, you may use either [copy](https://www.windows-commandline.com/windows-copy-command-syntax-examples/) or [xcopy](https://www.windows-commandline.com/xcopy-command-syntax-examples/) command instead. Otherwise, simply copy and paste.
 
 The backend directory should now look as follows:
 
-![bash screenshot of ls showing build directory](../../images/3/27new.png)
+![bash screenshot of ls showing build directory](../../images/3/27v.png)
 
-To make express show <i>static content</i>, the page <i>index.html</i> and the JavaScript, etc., it fetches, we need a built-in middleware from express called [static](http://expressjs.com/en/starter/static-files.html).
+To make express show <i>static content</i>, the page <i>index.html</i> and the JavaScript, etc., it fetches, we need a built-in middleware from Express called [static](http://expressjs.com/en/starter/static-files.html).
 
 When we add the following amidst the declarations of middlewares
 
 ```js
-app.use(express.static('build'))
+app.use(express.static('dist'))
 ```
 
-whenever express gets an HTTP GET request it will first check if the <i>build</i> directory contains a file corresponding to the request's address. If a correct file is found, express will return it.
+whenever express gets an HTTP GET request it will first check if the <i>dist</i> directory contains a file corresponding to the request's address. If a correct file is found, express will return it.
 
 Now HTTP GET requests to the address <i>www.serversaddress.com/index.html</i> or <i>www.serversaddress.com</i> will show the React frontend. GET requests to the address <i>www.serversaddress.com/api/notes</i> will be handled by the backend's code.
 
@@ -327,20 +315,25 @@ The application can now be used from the <i>backend</i> address <http://localhos
 
 Our application now works exactly like the [single-page app](/en/part0/fundamentals_of_web_apps#single-page-app) example application we studied in part 0.
 
-When we use a browser to go to the address <http://localhost:3001>, the server returns the <i>index.html</i> file from the <i>build</i> repository. The summarized contents of the file are as follows:
+When we use a browser to go to the address <http://localhost:3001>, the server returns the <i>index.html</i> file from the <i>dist</i> directory. The contents of the file are as follows:
 
 ```html
-<head>
-  <meta charset="utf-8"/>
-  <title>React App</title>
-  <link href="/static/css/main.f9a47af2.chunk.css" rel="stylesheet">
-</head>
-<body>
-  <div id="root"></div>
-  <script src="/static/js/1.578f4ea1.chunk.js"></script>
-  <script src="/static/js/main.104ca08d.chunk.js"></script>
-</body>
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+    <script type="module" crossorigin src="/assets/index-5f6faa37.js"></script>
+    <link rel="stylesheet" href="/assets/index-198af077.css">
+  </head>
+  <body>
+    <div id="root"></div>
+    
+  </body>
 </html>
+
 ```
 
 The file contains instructions to fetch a CSS stylesheet defining the styles of the application, and two <i>script</i> tags that instruct the browser to fetch the JavaScript code of the application - the actual React application.
@@ -452,7 +445,7 @@ Another option is the use of [shx](https://www.npmjs.com/package/shx).
 
 ### Proxy
 
-Changes on the frontend have caused it to no longer work in development mode (when started with command _npm start_), as the connection to the backend does not work.
+Changes on the frontend have caused it to no longer work in development mode (when started with command _npm run dev_), as the connection to the backend does not work.
 
 ![Network dev tools showing a 404 on getting notes](../../images/3/32new.png)
 
@@ -464,29 +457,36 @@ const baseUrl = '/api/notes'
 
 Because in development mode the frontend is at the address <i>localhost:3000</i>, the requests to the backend go to the wrong address <i>localhost:3000/api/notes</i>. The backend is at <i>localhost:3001</i>.
 
-If the project was created with create-react-app, this problem is easy to solve. It is enough to add the following declaration to the <i>package.json</i> file of the frontend repository.
+If the project was created with Vite, this problem is easy to solve. It is enough to add the following declaration to the <i>vite.config.json</i> file of the frontend repository.
 
 ```bash
-{
-  "dependencies": {
-    // ...
-  },
-  "scripts": {
-    // ...
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  // highlight-start
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3001',
+        changeOrigin: true,
+      },
+    }
   },
-  "proxy": "http://localhost:3001"  // highlight-line
-}
+  // highlight-end
+})
+
 ```
 
-After a restart, the React development environment will work as a [proxy](https://create-react-app.dev/docs/proxying-api-requests-in-development/). If the React code does an HTTP request to a server address at <i><http://localhost:3000></i> not managed by the React application itself (i.e. when requests are not about fetching the CSS or JavaScript of the application), the request will be redirected to the server at <i><http://localhost:3001></i>.
+After a restart, the React development environment will work as a [proxy](https://vitejs.dev/config/server-options.html#server-proxy). If the React code does an HTTP request to a server address at <i><http://localhost:3000></i> not managed by the React application itself (i.e. when requests are not about fetching the CSS or JavaScript of the application), the request will be redirected to the server at <i><http://localhost:3001></i>.
 
 Now the frontend is also fine, working with the server both in development- and production mode.
 
-A negative aspect of our approach is how complicated it is to deploy the frontend. Deploying a new version requires generating a new production build of the frontend and copying it to the backend repository. This makes creating an automated [deployment pipeline](https://martinfowler.com/bliki/DeploymentPipeline.html) more difficult. Deployment pipeline means an automated and controlled way to move the code from the computer of the developer through different tests and quality checks to the production environment. Building a deployment pipeline is the topic of [part 11](https://fullstackopen.com/en/part11) of this course.
-
-There are multiple ways to achieve this (for example placing both backend and frontend code [in the same repository](https://github.com/mars/heroku-cra-node) ) but we will not go into those now.
+A negative aspect of our approach is how complicated it is to deploy the frontend. Deploying a new version requires generating a new production build of the frontend and copying it to the backend repository. This makes creating an automated [deployment pipeline](https://martinfowler.com/bliki/DeploymentPipeline.html) more difficult. Deployment pipeline means an automated and controlled way to move the code from the computer of the developer through different tests and quality checks to the production environment. Building a deployment pipeline is the topic of [part 11](https://fullstackopen.com/en/part11) of this course. There are multiple ways to achieve this (for example placing both backend and frontend code in the same repository but we will not go into those now.
 
-In some situations, it may be sensible to deploy the frontend code as its own application. With apps created with create-react-app it is [straightforward](https://github.com/mars/create-react-app-buildpack).
+In some situations, it may be sensible to deploy the frontend code as its own application.
 
 The current backend code can be found on [Github](https://github.com/fullstack-hy2020/part3-notes-backend/tree/part3-3), in the branch <i>part3-3</i>. The changes in frontend code are in <i>part3-1</i> branch of the [frontend repository](https://github.com/fullstack-hy2020/part2-notes/tree/part3-1).
 
@@ -524,7 +524,7 @@ Generate a production build of your frontend, and add it to the internet applica
 
 **NB** If you use Render, make sure the directory <i>build</i> is not gitignored
 
-Also, make sure that the frontend still works locally (in development mode when started with command _npm start_).
+Also, make sure that the frontend still works locally (in development mode when started with command _npm run dev_).
 
 If you have problems getting the app working make sure that your directory structure matches [the example app](https://github.com/fullstack-hy2020/part3-notes-backend/tree/part3-3).
 

src/content/3/fi/osa3.md

@@ -8,7 +8,7 @@ lang: fi
 
 Tässä osassa fokus siirtyy backendin, eli palvelimen toiminnallisuuden toteuttamiseen. Toteutamme Node.js:n Express-kirjastoa hyödyntäen yksinkertaisen REST-apin, joka tallettaa dataa MongoDB-tietokantaan. Viemme myös sovelluksemme internetiin. 
 
-<i>Osa päivitetty 19.1.2023</i>
-- <i>Ohje [https://render.com/](https://render.com/)-palvelun käyttöön lisätty</i>
+<i>Osa päivitetty 11.8.2023</i>
+- <i>Create React App korvattu Vitellä</i>
 
 </div>