Skip to content

Commit 7bc1616

Browse files
committed
Remove instructions about creating own repository for part3 exercises
1 parent e2ff5d0 commit 7bc1616

File tree

6 files changed

+32
-40
lines changed

6 files changed

+32
-40
lines changed

src/content/3/en/part3a.md

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -743,8 +743,6 @@ What exactly is happening in that line of code? <em>notes.map(n => n.id)</em> cr
743743

744744
### Exercises 3.1.-3.6.
745745

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-
748746
**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.
749747

750748
**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.

src/content/3/en/part3b.md

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -261,7 +261,7 @@ The minified code is not very readable. The beginning of the code looks like thi
261261
262262
### Serving static files from the backend
263263
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.
265265
266266
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
267267
@@ -301,7 +301,7 @@ const getAll = () => {
301301
// ...
302302
```
303303
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.
305305
306306
The application can now be used from the <i>backend</i> address <http://localhost:3001>:
307307
@@ -354,7 +354,7 @@ fly deploy
354354
<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.
355355
356356
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.
358358
359359
The application works perfectly, except we haven't added the functionality for changing the importance of a note to the backend yet.
360360
@@ -392,6 +392,14 @@ The scripts look like this:
392392
}
393393
}
394394
```
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.
395403
396404
##### Note for Windows users
397405
@@ -403,14 +411,6 @@ Note that the standard shell commands in `build:ui` do not natively work in Wind
403411
404412
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.
405413
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-
414414
#### Render
415415
416416
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
429429
430430
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.
431431
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.
433433
434434
>**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:
435435
@@ -453,7 +453,7 @@ const baseUrl = '/api/notes'
453453
454454
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>.
455455
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.
457457
458458
```bash
459459
import { defineConfig } from 'vite'
@@ -484,9 +484,7 @@ Now the frontend is also working correctly. It functions both in development mod
484484
npm remove cors
485485
```
486486
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.
490488
491489
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).
492490

src/content/3/en/part3d.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -171,13 +171,13 @@ If an HTTP POST request tries to add a person with an invalid phone number, the
171171

172172
#### 3.21 Deploying the database backend to production
173173

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/>.
175175

176176
Push the latest version to Fly.io/Render and verify that everything works there as well.
177177

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).
179179

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.
181181

182182
</div>
183183

src/content/3/fi/osa3a.md

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -715,9 +715,7 @@ Mitä rivillä tapahtuu? <em>notes.map(n => Number(n.id))</em> muodostaa tauluko
715715

716716
### Tehtävät 3.1.-3.6.
717717

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.
721719

722720

723721
**Vahva suositus:** kun teet backendin koodia, pidä koko ajan silmällä, mitä palvelimen koodia suorittavassa konsolissa tapahtuu.

src/content/3/fi/osa3b.md

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -220,7 +220,7 @@ Minifioitu koodi ei ole miellyttävää luettavaa. Koodin alku näyttää seuraa
220220
221221
### Staattisten tiedostojen tarjoaminen backendistä
222222
223-
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>.
224224
225225
Aloitetaan kopioimalla frontendin tuotantokoodi backendin alle, projektin juureen. Omalla koneellani kopiointi tapahtuu frontendin hakemistosta käsin komennolla
226226
@@ -258,7 +258,7 @@ const getAll = () => {
258258
// ...
259259
```
260260
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.
262262
263263
Sovellusta voidaan käyttää nyt <i>backendin</i> osoitteesta <http://localhost:3001>:
264264
@@ -310,11 +310,11 @@ fly deploy
310310
311311
<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.
312312
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".
314314
315315
Sovellus toimii moitteettomasti lukuun ottamatta vielä backendiin toteuttamatonta muistiinpanon tärkeyden muuttamista:
316316
317-
![Selain renderöi sovelluksen frontendin (joka näyttää palvelimella olevan datan) mentäessä sovelluksen heroku-urlin juureen](../../images/3/30new.png)
317+
![Selain renderöi sovelluksen frontendin (joka näyttää palvelimella olevan datan) mentäessä sovelluksen urlin juureen](../../images/3/30new.png)
318318
319319
Sovelluksemme tallettama tieto ei ole ikuisesti pysyvää, sillä sovellus tallettaa muistiinpanot muuttujaan. Jos sovellus kaatuu tai se uudelleenkäynnistetään, kaikki tiedot katoavat.
320320
@@ -345,6 +345,12 @@ Fly.io:n tapauksessa skriptit näyttävät seuraavalta:
345345
}
346346
}
347347
```
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.
348354
349355
##### Huomautus Windows-käyttäjille
350356
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
355361
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.
356362
357363
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-
364364
#### Render
365365
366366
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
379379
380380
_npm run deploy:full_ sisältää edellisen lisäksi vaadittavat <i>git</i>-komennot versionhallinnan päivittämistä varten.
381381
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.
383383
384384
### Proxy
385385
@@ -395,7 +395,7 @@ const baseUrl = '/api/notes'
395395
396396
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>.
397397
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ä:
399399
400400
```bash
401401
import { defineConfig } from 'vite'
@@ -426,9 +426,7 @@ Nyt myös frontend on kunnossa. Se toimii sekä sovelluskehitysmoodissa että tu
426426
npm remove cors
427427
```
428428
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).
432430
433431
Sovelluksen tämänhetkinen koodi on kokonaisuudessaan [GitHubissa](https://github.com/fullstack-hy2020/part3-notes-backend/tree/part3-3), branchissa <i>part3-3</i>.
434432

src/content/3/fi/osa3d.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,7 @@ Jos HTTP POST ‑pyyntö yrittää lisätä virheellistä numeroa, tulee vastata
164164

165165
#### 3.21 tietokantaa käyttävä versio Internetiin
166166

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>.
168168

169169
Pushaa uusi versio Fly.io:n tai Renderiin ja varmista, että kaikki toimii myös siellä.
170170

0 commit comments

Comments
 (0)