From 44f9a9f056386733a8f5631474980ff24810f716 Mon Sep 17 00:00:00 2001 From: Dave Verwer Date: Mon, 25 Sep 2023 10:47:37 +0100 Subject: [PATCH] Extended instructions on front-end development. --- LOCAL_DEVELOPMENT_SETUP.md | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/LOCAL_DEVELOPMENT_SETUP.md b/LOCAL_DEVELOPMENT_SETUP.md index a38284663b..adb23fbedc 100644 --- a/LOCAL_DEVELOPMENT_SETUP.md +++ b/LOCAL_DEVELOPMENT_SETUP.md @@ -66,7 +66,28 @@ make lint-front-end Or, if you want to run either the CSS or JavaScript linting steps separately, run the `run-stylelint` or `run-prettier` commands individually. Versions of these commands also exist that can automatically fix common problems that cause the lint to fail. Run `make lint-front-end-auto-fix` to run both `run-stylelint-auto-fix` and `run-prettier-auto-fix` and fix all automatically fixable problems. -**Note:** If you are doing extensive work with the front end, you may want to install `node` and `yarn` locally rather than running them via Docker. You may also want to set up `stylelint` and `prettier` to run from within your code editor, rather than waiting for CI to find errors. +## Developing Front End Code + +**Note:** This section is completely optional and is only even applicable if you want to do front-end (CSS/JavaScript) work on the project. + +If you are doing anything more than a quick tweak to a front-end files, you will want to install `node` and `yarn` locally rather than running them via Docker. You may also want to set up `stylelint` and `prettier` to run from within your code editor, rather than waiting for CI or the `make` commands to find errors. + +### Installing Front End Tools Locally + +It is best to install node and yarn with `nvm`, which you can install by running `brew install nvm`. Then, install the latest stable node release with `nvm install stable` and `nvm use stable`. Then, check that you can run `node --version` and `npm --version` and that they show the same version numbers as you just installed. + +Finally, install `yarn` globally (for this installation of `node`) by running `npm install yarn -g`.Run `yarn` with no parameters to install all front-end dependencies, then run `yarn build` and you should see no error messages. + +### Setting up VS Code to Automatically Run the Yarn Server + +If you use Visual Studio Code for front-end development, there are some useful template files in `.vscode`: + +* `settings.json.template` includes settings to automatically configure Visual Studio code to autoformat and lint on every save. +* `tasks.json.template` will start up a yarn server to regenerate all front-end files on every save. + +If you do not have a `settings.json` or `tasks.json` file in your `.vscode` directory, just remove the `.template` extensions. If you have existring files, you will need to merge the two files manually. + +**Note:** You will need the [Prettier extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) installed for these settings to work. ### Check Everything Works!