You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/3/en/part3a.md
-2Lines changed: 0 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -743,8 +743,6 @@ What exactly is happening in that line of code? <em>notes.map(n => n.id)</em> cr
743
743
744
744
### Exercises 3.1.-3.6.
745
745
746
-
**NB:** It's recommended to do all of the exercises from this part into a new dedicated git repository, and place your source code right at the root of the repository. Otherwise, you will run into problems in exercise 3.10.
747
-
748
746
**NB:** Because this is not a frontend project and we are not working with React, the application <strong>is not created</strong> with create vite@latest -- --template react. You initialize this project with the <em>npm init</em> command that was demonstrated earlier in this part of the material.
749
747
750
748
**NB:** Because the "node\_modules" is created using "npm init", it will not be excluded when you are trying to add your code to git using "git add .", therefore please create a file called ".gitignore" and write "node\_modules" so that git ignores it everytime you try to add, commit or push to a remote repo.
Copy file name to clipboardExpand all lines: src/content/3/en/part3b.md
+14-16Lines changed: 14 additions & 16 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -261,7 +261,7 @@ The minified code is not very readable. The beginning of the code looks like thi
261
261
262
262
### Serving static files from the backend
263
263
264
-
One option for deploying the frontend is to copy the production build (the <i>dist</i> directory) to the root of the backend repository and configure the backend to show the frontend's <i>main page</i> (the file <i>dist/index.html</i>) as its main page.
264
+
One option for deploying the frontend is to copy the production build (the <i>dist</i> directory) to the root of the backend directory and configure the backend to show the frontend's <i>main page</i> (the file <i>dist/index.html</i>) as its main page.
265
265
266
266
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
267
267
@@ -301,7 +301,7 @@ const getAll = () => {
301
301
// ...
302
302
```
303
303
304
-
After the change, we have to create a new production build of the frontend and copy it to the root of the backend repository.
304
+
After the change, we have to create a new production build of the frontend and copy it to the root of the backend directory.
305
305
306
306
The application can now be used from the <i>backend</i> address <http://localhost:3001>:
307
307
@@ -354,7 +354,7 @@ fly deploy
354
354
<strong>NOTE:</strong> The _.dockerignore_ file in your project directory lists files not uploaded during deployment. The dist directory may be included by default. If that's the case, remove its reference from the .dockerignore file, ensuring your app is properly deployed.
355
355
356
356
357
-
<strong>In the case of Render</strong>, commit the production build of the frontend to the backend repository, and push the code to GitHub again. Make sure the directory <i>dist</i> is not ignored by git on the backend. A push to GitHub <i>might</i> be enough. If the automatic deployment does not work, select the "manual deploy" from the Render dashboard.
357
+
<strong>In the case of Render</strong>, commit the changes, and push the code to GitHub again. Make sure the directory <i>dist</i> is not ignored by git on the backend. A push to GitHub <i>might</i> be enough. If the automatic deployment does not work, select the "manual deploy" from the Render dashboard.
358
358
359
359
The application works perfectly, except we haven't added the functionality for changing the importance of a note to the backend yet.
360
360
@@ -392,6 +392,14 @@ The scripts look like this:
392
392
}
393
393
}
394
394
```
395
+
396
+
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.
397
+
398
+
_npm run deploy:full_ combines these two scripts, i.e., _npm run build:ui_ and _npm run deploy_.
399
+
400
+
There is also a script _npm run logs:prod_ to show the Fly.io logs.
401
+
402
+
Note that the directory paths in the script <i>build:ui</i> depend on the location of the frontend and backend directories in the file system.
395
403
396
404
##### Note for Windows users
397
405
@@ -403,14 +411,6 @@ Note that the standard shell commands in `build:ui` do not natively work in Wind
403
411
404
412
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.
405
413
406
-
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.
407
-
408
-
_npm run deploy:full_ combines these two scripts, i.e., _npm run build:ui_ and _npm run deploy_.
409
-
410
-
There is also a script _npm run logs:prod_ to show the Fly.io logs.
411
-
412
-
Note that the directory paths in the script <i>build:ui</i> depend on the location of repositories in the file system.
413
-
414
414
#### Render
415
415
416
416
Note: When you attempt to deploy your backend to Render, make sure you have a separate repository for the backend and deploy that github repo through Render, attempting to deploy through your Fullstackopen repository will often throw "ERR path ....package.json".
@@ -429,7 +429,7 @@ In case of Render, the scripts look like the following
429
429
430
430
The script _npm run build:ui_ builds the frontend and copies the production version under the backend repository. _npm run deploy:full_ contains also the necessary <i>git</i> commands to update the backend repository.
431
431
432
-
Note that the directory paths in the script <i>build:ui</i> depend on the location of repositories in the file system.
432
+
Note that the directory paths in the script <i>build:ui</i> depend on the location of the frontend and backend directories in the file system.
433
433
434
434
>**NB** On Windows, npm scripts are executed in cmd.exe as the default shell which does not support bash commands. For the above bash commands to work, you can change the default shell to Bash (in the default Git for Windows installation) as follows:
435
435
@@ -453,7 +453,7 @@ const baseUrl = '/api/notes'
453
453
454
454
Because in development mode the frontend is at the address <i>localhost:5173</i>, the requests to the backend go to the wrong address <i>localhost:5173/api/notes</i>. The backend is at <i>localhost:3001</i>.
455
455
456
-
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.js</i> file of the frontend repository.
456
+
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.js</i> file of the frontend directory.
457
457
458
458
```bash
459
459
import { defineConfig } from'vite'
@@ -484,9 +484,7 @@ Now the frontend is also working correctly. It functions both in development mod
484
484
npm remove cors
485
485
```
486
486
487
-
We have now successfully deployed the entire application to the internet. 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.
488
-
489
-
In some situations, it may be sensible to deploy the frontend code as its own application.
487
+
We have now successfully deployed the entire application to the internet. There are many other ways to implement deployments. For example, deploying the frontend code as its own application may be sensible in some situations, as it can facilitate the implementation of an automated [deployment pipeline](https://martinfowler.com/bliki/DeploymentPipeline.html). A deployment pipeline refers to an automated and controlled way to move code from the developer's machine through various tests and quality control stages to the production environment. This topic is covered in [part 11](/en/part11) of the course.
490
488
491
489
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-frontend/tree/part3-1).
Copy file name to clipboardExpand all lines: src/content/3/en/part3d.md
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -171,13 +171,13 @@ If an HTTP POST request tries to add a person with an invalid phone number, the
171
171
172
172
#### 3.21 Deploying the database backend to production
173
173
174
-
Generate a new "full stack" version of the application by creating a new production build of the frontend, and copying it to the backend repository. Verify that everything works locally by using the entire application from the address <http://localhost:3001/>.
174
+
Generate a new "full stack" version of the application by creating a new production build of the frontend, and copying it to the backend directory. Verify that everything works locally by using the entire application from the address <http://localhost:3001/>.
175
175
176
176
Push the latest version to Fly.io/Render and verify that everything works there as well.
177
177
178
-
**NOTE**: you should deploy the BACKEND to the cloud service. If you are using Fly.io the commands should be run in the root directory of the backend (that is, in the same directory where the backend package.json is). In case of using Render, the backend must be in the root of your repository.
178
+
**NOTE**: you should deploy the BACKEND to the cloud service. If you are using Fly.io the commands should be run in the root directory of the backend (that is, in the same directory where the backend package.json is).
179
179
180
-
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.
180
+
You shall NOT be deploying the frontend directly at any stage of this part. It is just backend that is deployed throughout the whole part, nothing else.
Copy file name to clipboardExpand all lines: src/content/3/fi/osa3a.md
+1-3Lines changed: 1 addition & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -715,9 +715,7 @@ Mitä rivillä tapahtuu? <em>notes.map(n => Number(n.id))</em> muodostaa tauluko
715
715
716
716
### Tehtävät 3.1.-3.6.
717
717
718
-
**HUOM:** tämän osan tehtäväsarja kannattaa tehdä omaan Git-repositorioon ja suoraan repositorion juureen! Jos et tee näin, joudut ongelmiin tehtävässä 3.10
719
-
720
-
**HUOM2:** Koska nyt ei ole kyse frontendista ja Reactista, sovellusta <strong>ei luoda</strong> Vitellä vaan komennolla <em>npm init</em>, kuten ylempänä tämän osan materiaalissa.
718
+
**HUOM:** Koska nyt ei ole kyse frontendista ja Reactista, sovellusta <strong>ei luoda</strong> Vitellä vaan komennolla <em>npm init</em>, kuten ylempänä tämän osan materiaalissa.
721
719
722
720
723
721
**Vahva suositus:** kun teet backendin koodia, pidä koko ajan silmällä, mitä palvelimen koodia suorittavassa konsolissa tapahtuu.
Eräs mahdollisuus frontendin tuotantoon viemiseen on kopioida tuotantokoodi eli hakemisto <i>dist</i> backendin repositorion juureen ja määritellä backend näyttämään pääsivunaan frontendin <i>pääsivu</i> eli tiedosto <i>dist/index.html</i>.
223
+
Eräs mahdollisuus frontendin tuotantoon viemiseen on kopioida tuotantokoodi eli hakemisto <i>dist</i> backendin hakemiston juureen ja määritellä backend näyttämään pääsivunaan frontendin <i>pääsivu</i> eli tiedosto <i>dist/index.html</i>.
224
224
225
225
Aloitetaan kopioimalla frontendin tuotantokoodi backendin alle, projektin juureen. Omalla koneellani kopiointi tapahtuu frontendin hakemistosta käsin komennolla
226
226
@@ -258,7 +258,7 @@ const getAll = () => {
258
258
// ...
259
259
```
260
260
261
-
Muutoksen jälkeen frontendistä on luotava uusi production build ja kopioitava se backendin repositorion juureen.
261
+
Muutoksen jälkeen frontendistä on luotava uusi production build ja kopioitava se backendin projektin juureen.
262
262
263
263
Sovellusta voidaan käyttää nyt <i>backendin</i> osoitteesta <http://localhost:3001>:
264
264
@@ -310,11 +310,11 @@ fly deploy
310
310
311
311
<strong>HUOM:</strong> Projektin juureen luotu _.dockerignore_-tiedosto listaa ne tiedostot, joita ei oteta mukaan deploymentiin, ja dist-kansio saattaa olla siellä mukana oletuksena. Jos näin on, poista viittaus dist/ _.dockerignore_-tiedostosta, jotta sovelluksesi otetaan käyttöön oikein.
312
312
313
-
<strong>Renderin tapauksessa</strong> commitoidaan frontendin tuotantoversio backendin repositorioon ja pushataan koodi GitHubiin. Automaattinen uudelleenkäynnistys saattaa toimia, mutta jos näin ei ole, käynnistä uusi versio itse dashboardin kautta tekemällä "manual deployment".
313
+
<strong>Renderin tapauksessa</strong> commitoidaan tehdyt muutokset ja pushataan koodi GitHubiin. Automaattinen uudelleenkäynnistys saattaa toimia, mutta jos näin ei ole, käynnistä uusi versio itse dashboardin kautta tekemällä "manual deployment".
314
314
315
315
Sovellus toimii moitteettomasti lukuun ottamatta vielä backendiin toteuttamatonta muistiinpanon tärkeyden muuttamista:
316
316
317
-

317
+

318
318
319
319
Sovelluksemme tallettama tieto ei ole ikuisesti pysyvää, sillä sovellus tallettaa muistiinpanot muuttujaan. Jos sovellus kaatuu tai se uudelleenkäynnistetään, kaikki tiedot katoavat.
320
320
@@ -345,6 +345,12 @@ Fly.io:n tapauksessa skriptit näyttävät seuraavalta:
345
345
}
346
346
}
347
347
```
348
+
349
+
Skripteistä _npm run build:ui_ kääntää ui:n tuotantoversioksi ja kopioi sen. _npm run deploy_ julkaisee Fly.io:n.
350
+
351
+
_npm run deploy:full_ yhdistää molemmat edellä mainitut komennot. Lisätään lisäksi oma skripti _npm run logs:prod_ lokien lukemiseen, jolloin käytännössä kaikki toimii npm-skriptein.
352
+
353
+
Huomaa, että skriptissä <i>build:ui</i> olevat polut riippuvat frontendin ja backendin hakemistojen sijainnista.
348
354
349
355
##### Huomautus Windows-käyttäjille
350
356
Huomaa, että näistä _build:ui_:n käyttämät shell-komennot eivät toimi natiivisti Windowsilla, jonka powershell käyttää eri komentoja. Tällöin skripti olisi
@@ -355,12 +361,6 @@ Huomaa, että näistä _build:ui_:n käyttämät shell-komennot eivät toimi nat
355
361
Mikäli skripti ei toimi Windowsilla, tarkista, että terminaalisi sovelluskehitysympäristössäsi on Powershell eikä esimerkiksi Command Prompt. Jos olet asentanut Git Bash ‑terminaalin, tai muun Linuxia matkivan terminaalin tai ympäristön, saatat pystyä ajamaan Linuxin kaltaisia komentoja myös Windowsilla.
356
362
357
363
358
-
Skripteistä _npm run build:ui_ kääntää ui:n tuotantoversioksi ja kopioi sen. _npm run deploy_ julkaisee Fly.io:n.
359
-
360
-
_npm run deploy:full_ yhdistää molemmat edellä mainitut komennot. Lisätään lisäksi oma skripti _npm run logs:prod_ lokien lukemiseen, jolloin käytännössä kaikki toimii npm-skriptein.
361
-
362
-
Huomaa, että skriptissä <i>build:ui</i> olevat polut riippuvat repositorioiden sijainnista.
363
-
364
364
#### Render
365
365
366
366
Renderin tapauksessa skriptit näyttävät seuraavalta:
@@ -379,7 +379,7 @@ Skripteistä _npm run build:ui_ kääntää ui:n tuotantoversioksi ja kopioi sen
379
379
380
380
_npm run deploy:full_ sisältää edellisen lisäksi vaadittavat <i>git</i>-komennot versionhallinnan päivittämistä varten.
381
381
382
-
Huomaa, että skriptissä <i>build:ui</i> olevat polut riippuvat repositorioiden sijainnista.
382
+
Huomaa, että skriptissä <i>build:ui</i> olevat polut riippuvat frontendin ja backendin hakemistojen sijainnista.
383
383
384
384
### Proxy
385
385
@@ -395,7 +395,7 @@ const baseUrl = '/api/notes'
395
395
396
396
Koska frontend toimii osoitteessa <i>localhost:5173</i>, menevät backendiin tehtävät pyynnöt väärään osoitteeseen <i>localhost:5173/api/notes</i>. Backend toimii kuitenkin osoitteessa <i>localhost:3001</i>.
397
397
398
-
Vitellä luoduissa projekteissa ongelma on helppo ratkaista. Riittää, että frontendin repositorion tiedostoon <i>vite.config.js</i> lisätään seuraava määritelmä:
398
+
Vitellä luoduissa projekteissa ongelma on helppo ratkaista. Riittää, että frontendin tiedostoon <i>vite.config.js</i> lisätään seuraava määritelmä:
399
399
400
400
```bash
401
401
import { defineConfig } from'vite'
@@ -426,9 +426,7 @@ Nyt myös frontend on kunnossa. Se toimii sekä sovelluskehitysmoodissa että tu
426
426
npm remove cors
427
427
```
428
428
429
-
Olemme nyt vieneet koko sovelluksen onnistuneesti internetiin. Eräs negatiivinen puoli käyttämässämme lähestymistavassa on, että sovelluksen uuden version tuotantoon vieminen edellyttää erillisessä repositoriossa olevan frontendin koodin tuotantoversion generoimista. Tämä taas hankaloittaa automatisoidun [deployment pipelinen](https://martinfowler.com/bliki/DeploymentPipeline.html) toteuttamista. Deployment pipelinellä tarkoitetaan automatisoitua ja hallittua tapaa viedä koodi sovelluskehittäjän koneelta erilaisten testien ja laadunhallinnallisten vaiheiden kautta tuotantoympäristöön. Aiheeseen tutustutaan kurssin [osassa 11](https://fullstackopen.com/osa11).
430
-
431
-
Tähänkin on useita erilaisia ratkaisuja (esim. sekä frontendin että backendin [sijoittaminen samaan repositorioon](https://github.com/mars/heroku-cra-node)), emme kuitenkaan nyt mene niihin. Myös frontendin koodin deployaaminen omana sovelluksenaan voi joissain tilanteissa olla järkevää.
429
+
Olemme nyt vieneet koko sovelluksen onnistuneesti internetiin. Deploymenttien toteuttamiseen on olemassa monenlaisia muitakin tapoja. Esimerkiksi frontendin koodin deployaaminen omana sovelluksenaan voi joissain tilanteissa olla järkevää, sillä se voi helpottaa automatisoidun [deployment pipelinen](https://martinfowler.com/bliki/DeploymentPipeline.html) toteuttamista. Deployment pipelinellä tarkoitetaan automatisoitua ja hallittua tapaa viedä koodi sovelluskehittäjän koneelta erilaisten testien ja laadunhallinnallisten vaiheiden kautta tuotantoympäristöön. Aiheeseen tutustutaan kurssin [osassa 11](https://fullstackopen.com/osa11).
432
430
433
431
Sovelluksen tämänhetkinen koodi on kokonaisuudessaan [GitHubissa](https://github.com/fullstack-hy2020/part3-notes-backend/tree/part3-3), branchissa <i>part3-3</i>.
Copy file name to clipboardExpand all lines: src/content/3/fi/osa3d.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -164,7 +164,7 @@ Jos HTTP POST ‑pyyntö yrittää lisätä virheellistä numeroa, tulee vastata
164
164
165
165
#### 3.21 tietokantaa käyttävä versio Internetiin
166
166
167
-
Generoi päivitetystä sovelluksesta "full stack" ‑versio, eli tee frontendista uusi production build ja kopioi se backendin repositorioon. Varmista, että kaikki toimii paikallisesti käyttämällä koko sovellusta backendin osoitteesta <http://localhost:3001>.
167
+
Generoi päivitetystä sovelluksesta "full stack" ‑versio, eli tee frontendista uusi production build ja kopioi se backendin juureen. Varmista, että kaikki toimii paikallisesti käyttämällä koko sovellusta backendin osoitteesta <http://localhost:3001>.
168
168
169
169
Pushaa uusi versio Fly.io:n tai Renderiin ja varmista, että kaikki toimii myös siellä.
0 commit comments