part 3b

Author: pablo-maff

src/content/3/en/part3b.md

@@ -99,7 +99,7 @@ Render might be a bit easier to use since it does not require any software to be
 
 There are also some other free hosting options that work well for this course, at least for all parts other than part 11 (CI/CD) that might have one tricky exercise for other platforms.
 
-Some course participants have also used the following
+Some course participants have also used the following services:
 
 - [Cyclic](https://www.cyclic.sh/)
 - [Replit](https://replit.com)
@@ -146,7 +146,7 @@ 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 configuration:
+Fly.io creates a file <i>fly.toml</i> in the root of your app where we can configure it. To get the app up and running we <i>might</i> need to do a small addition to the configuration:
 
 ```bash
 [build]
@@ -207,7 +207,6 @@ Whenever you make changes to the application, you can take the new version to pr
 fly deploy
 ```
 
-
 #### Render
 
 The following assumes that the [sign in](https://dashboard.render.com/) has been made with a GitHub account.
@@ -255,7 +254,7 @@ So far we have been running React code in <i>development mode</i>. In developmen
 
 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 Vite can be created with the command [npm run build](https://vitejs.dev/guide/build.html).
+A production build for 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).
 
@@ -281,7 +280,7 @@ If you are using a Windows computer, you may use either [copy](https://www.windo
 
 The backend directory should now look as follows:
 
-![bash screenshot of ls showing build directory](../../images/3/27v.png)
+![bash screenshot of ls showing dist 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).
 
@@ -313,7 +312,7 @@ After the change, we have to create a new production build of the frontend and c
 
 The application can now be used from the <i>backend</i> address <http://localhost:3001>:
 
-![Notes application screenshot](../../images/3/28new.png)
+![Notes application in localhost:3001](../../images/3/28new.png)
 
 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.
 
@@ -376,7 +375,7 @@ The application needs a database. Before we introduce one, let's go through a fe
 
 The setup now looks like as follows:
 
-![diagram of react app on heroku with a database](../../images/3/102.png)
+![diagram of react app on fly.io](../../images/3/102.png)
 
 The node/express-backend now resides in the Fly.io/Render server. When the root address is accessed, the browser loads and executes the React app that fetches the json-data from the Fly.io/Render server.
 
@@ -386,7 +385,7 @@ To create a new production build of the frontend without extra manual work, let'
 
 #### Fly.io script
 
-The script looks like this:
+The scripts look like this:
 
 ```json
 {
@@ -401,14 +400,15 @@ The script looks like this:
 ```
   
 ##### Note for Windows users
+
 Note that the standard shell commands in `build:ui` do not natively work in Windows. Powershell in Windows works differently, in which case the script could be written as
+
 ```json
 "build:ui": "@powershell Remove-Item -Recurse -Force dist && cd ../frontend && npm run build && @powershell Copy-Item dist -Recurse ../backend",
 ```
   
 If the script does not work on Windows, confirm that you are using Powershell and not Command Prompt. If you have installed Git Bash or another Linux-like terminal, you may be able to run Linux-like commands on Windows as well.
 
-
 The script _npm run build:ui_ builds the frontend and copies the production version under the backend repository. The script _npm run deploy_ releases the current backend to Fly.io.
 
 _npm run deploy:full_ combines these two scripts, i.e., _npm run build:ui_ and _npm run deploy_.
@@ -488,7 +488,7 @@ Note that with the vite-configuration shown above, only requests that are made t
 
 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 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](/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.
 
@@ -502,13 +502,13 @@ The current backend code can be found on [Github](https://github.com/fullstack-h
 
 The following exercises don't require many lines of code. They can however be challenging, because you must understand exactly what is happening and where, and the configurations must be just right.
 
-#### 3.9 phonebook backend step9
+#### 3.9 Phonebook backend step 9
 
 Make the backend work with the phonebook frontend from the exercises of the previous part. Do not implement the functionality for making changes to the phone numbers yet, that will be implemented in exercise 3.17.
 
 You will probably have to do some small changes to the frontend, at least to the URLs for the backend. Remember to keep the developer console open in your browser. If some HTTP requests fail, you should check from the <i>Network</i>-tab what is going on. Keep an eye on the backend's console as well. If you did not do the previous exercise, it is worth it to print the request data or <i>request.body</i> to the console in the event handler responsible for POST requests.
 
-#### 3.10 phonebook backend step10
+#### 3.10 Phonebook backend step 10
 
 Deploy the backend to the internet, for example to Fly.io or Render.
 
@@ -522,11 +522,11 @@ Create a README.md at the root of your repository, and add a link to your online
 
 You shall NOT be deploying the frontend directly at any stage of this part. It is just backend repository that is deployed throughout the whole part, nothing else.
 
-#### 3.11 phonebook full stack
+#### 3.11 Full Stack Phonebook
 
-Generate a production build of your frontend, and add it to the internet application using the method introduced in this part.
+Generate a production build of your frontend, and add it to the Internet application using the method introduced in this part.
 
-**NB** If you use Render, make sure the directory <i>dist</i> is not gitignored
+**NB** If you use Render, make sure the directory <i>dist</i> is not ignored by git.
 
 Also, make sure that the frontend still works locally (in development mode when started with command _npm run dev_).