로컬 서버 세팅하기

튜토리얼 서버

안녕하세요.

본 글에선 모던 자바스크립트 튜토리얼 https://javascript.info을 로컬 환경에서 구동하기 위한 방법을 설명합니다.

서버는 Windows, Unix 계열 OS, macOS 모두에서 구동할 수 있습니다. Windows 사용자라면 Git Bash 등을 이용해 스크립트를 불러와야 하므로 참고하시기 바랍니다.

설치

1. Git과 Node.js를 설치하기

   Git과 Node.js는 서버를 업데이트하고 구동하기 위한 필수 요구사항입니다. Windows 사용자라면 다운로드하여 설치를 진행하시면 됩니다. 다른 운영체제 사용자라면 손에 익은 설치 도구를 사용하여 설치를 진행하시면 됩니다.

   Node.js는 10+ 버전을 설치하셔야 합니다.

   (선택사항) 이미지를 변경하려면 GraphicsMagick을 설치하셔야 합니다.

2. 전역에 필요한 모듈 설치하기

   npm install -g bunyan gulp@4

3. 프로젝트에 쓰일 루트 폴더를 만들기

   /js라는 이름을 가진 폴더를 만듭니다. 다른 이름을 가진 폴더를 만들어도 되는데, 그런 경우는 아래 명령어의 경로를 해당 경로로 바꿔주어야 합니다.

4. 서버 저장소 클론하기

   cd /js
   git clone https://github.com/javascript-tutorial/server
   git clone https://github.com/javascript-tutorial/engine server/modules/engine

   두 개의 저장소에서 클론을 받아왔습니다. modules/engine은 오타가 아닙니다. 서버 구동에 필요한 엔진 소스 코드가 담긴 저장소입니다.

5. 한국어 저장소 클론하기

   cd /js
   git clone https://github.com/javascript-tutorial/ko.javascript.info

6. 사이트 구동하기

   먼저 모듈을 설치해야 합니다.

   cd /js/server
   npm install

   이제 한국어로 번역된 자바스크립트 튜토리얼을 띄워봅시다.

   ./edit ko

   빌드가 종료될 때까지 대기합니다.

   빌드가 종료되면 importWatch: Import complete라는 메시지가 뜹니다.

   http://127.0.0.1:3000에 접속해 튜토리얼이 잘 보이는지 확인합시다.

7. 튜토리얼 수정하기

   다섯 번째 단계에서 받아온 한국어 저장소를 수정하면 자동으로 튜토리얼 웹페이지가 새로 고침 됩니다.

이미지 내 문자 번역하기

이미지 내 문자열도 번역이 필요하기 때문에, 문자가 함께 있는 이미지는 SVG 파일로 만들었습니다.

Image translations reside in images.yml in the repository root, for example: https://github.com/javascript-tutorial/ru.javascript.info/blob/master/images.yml. Please, create it if needed.

The file format is "YAML", it's quite easy to understand:

code-style.svg:  # image file name
  "No space":    # English string
    text: "Без пробелов" # translation
    position: "center" # (optional) "center" or "right" - to position translated string.

The translated string may become longer or shorter. By default, the translated string starts at the same place:

```
|hello world (before)
|你好世界  (after translation)
```

Sometimes they need to be repositioned:

position: "center" centers the translated string, good if you have a vertical diagram, keeps text centered:

     |
hello world
  你好世界
     |

position: "right" makes sure that the translated string keeps the same right edge:

hello world |
    你好世界 |

After images.yaml with translations is ready, it's time to apply translations:

1. Setup git upstream (if you haven't yet) and pull latest changes:

   cd /js/zh.javascript.info 
   git remote add upstream https://github.com/javascript-tutorial/en.javascript.info
   git fetch upstream master

2. Run the translation task:

   cd /js/server
   # without --image it applies all translations (to all images)
   NODE_LANG=zh glp engine:koa:tutorial:figuresTranslate --image try-catch-flow.svg

For Windows: npm i -g cross-env and prepend the call with cross-env to pass environment variables, like this:

cd /js/server
cross-env NODE_LANG=zh...

The task takes upstream image version (English), replaces strings to it, then writes to same-named image in the tutorial repo.

You may want to open the resulting SVG file directly in the browser to see it.

P.S In order for positioning to work, you need to have ImageMagick installed: https://imagemagick.org/script/download.php (or use packages for Linux/MacOS).

Extract strings

The task to get all strings from an image as YAML (for translation, to add to images.yml):

cd /js/server
NODE_LANG=zh npm run gulp engine:koa:tutorial:imageYaml --image hello.svg

Dev mode

If you'd like to edit the server code (assuming you're familiar with Node.js), not the tutorial text, then there are two steps to do.

First, run the command that imports (and caches) the tutorial:

cd /js/server
NODE_LANG=en TUTORIAL_ROOT=/js/en.javascript.info npm run gulp engine:koa:tutorial:import

For Windows: npm i -g cross-env and prepend the call with cross-env to pass environment variables, like this:

cd /js/server
cross-env NODE_LANG=en...

In the code above, NODE_LANG sets server language, while TUTORIAL_ROOT is the full path to tutorial repo, by default is /js/$NODE_LANG.javascript.info.

Afterwards, call ./dev <server language> to run the server:

cd /js/server
./dev en

Running ./dev uses the tutorial that was imported and cached by the previous command.

It does not "watch" tutorial text, but it reloads the server after code changes.

Again, that's for developing the server code itself, not writing the tutorial.

Troubleshooting

Please ensure you have Node.js version 10+ (node -v shows the version).

If it still doesn't work – file an issue. Please mention OS and Node.js version.

Please pull the very latest git code and install latest NPM modules before publishing an issue.

-- Yours, Ilya Kantor [email protected]