This project is the monorepo for frontend and webview based applications.
Applications are built with Ember.js and managed as a series of pnpm workspaces with lerna workspace tools. The project directory contains several subdirectories that organize our various workspaces by type.
engines/
apps/
addons/
tools/
Using pnpm and Lerna in this way allows us to author multiple applications, libraries and tools that are utilized by each other and maintained together.
xcode-select --install
github
directory you might cd ~/github
first before cloning the repository. This will require you to have configured your ssh keys.git clone [email protected]:knownasilya/ember-chessboard.git
This will create a new folder fnb
within the current directory containing the project files.
curl https://get.volta.sh | bash
pnpm
curl -fsSL https://get.pnpm.io/install.sh | sh -
pnpm install
There is currently no additional setup needed for developing on the frontend beyond the instructions in setup for all
. However, you may find it useful to have ember-cli
globally available.
volta install ember-cli
You may also want to install watchman, which can help with many performance situations during the build.
brew install watchman
pnpm run start:<appName>:local
This will start the development server and launch a browser with the specified app.
If you would like more control over the build, test, and serve commands navigate to the respective application and utilize the respective commands from within the given repository. This can be especially useful when debugging or when trying to examine the difference between two versions/commits.
We run three separate forms of lint checks on our codebase. These checks run in CI on Pull Requests but you can also run them individually via the command line.
These checks are configured in a way
that they run lint on all of the projects within workspaces, but you can choose to switch into an individual project and run the same lint command within it as well. All root commands are in the scripts
hash within ./package.json while individual project commands are in their respective package.json
files.
pnpm run lint:types
configured by ./.tsconfig.json
pnpm run lint:jsts
configured by ./.eslintrc.js
pnpm run lint:hbs
configured by ./.template-lintrc.js
In addition to various browser compatibility and scenario tests, we run two key sets of tests in CI. These commands are similarly found in the scripts
hash within ./package.json with corresponding project commands located in respective respective package.json
files.
pnpm run test:production
pnpm run test:development
Production and development test scenarios run the same tests; however, production tests exclude tests that check for deprecations, asserts, and dev time checks to ensure our code still functions correctly with these things removed.
Within an individual project you will often want to run the tests specific to that project only. From within that project's directory the same commands above will work; however, they may not give you the fastest feedback, while below options may. Multple ways of running tests are available, below we go into three key distinct methods.
If you have an application running either via pnpm run start:<app-name>:local
or ember serve
, then navigating to the /tests
url will pull up and run the tests in the browser, allowing you to monitor and debug failures. If the application is serving at localhost:4200
, then localhost:4200/tests
will give access to the test.
From within a project directory:
ember test --serve
You may also be interested in adding the flag --no-launch
to prevent auto-launching a custom chrome instance so that you can use and manage the test run within an already open browser.
The flag --disable-live-reload
will prevent the test runner from attempting to launch additional browser instances when you've made changes while paused in a debugger.
By default ember test --serve
will build the application, serve it up, and monitor for changes after which it will rebuild. Sometimes this is undesireable, for instance when you want to run tests against multiple build specific to SHAs while determining where a problem was introduced and it also prevents monitoring the terminal for build errors while running tests.
We can separate the build and test serving into two commands within a project directory. First, the build command:
ember build --watch --output-path="./dist"
This tells ember to build the app, watch for and rebuild on changes, and put the built assets into the dist
directory. If you need to build multiple commits, give them separate output paths!
Next, connect your tests to the pre-built assets.
ember test --serve --path="./dist" --test-port=0
This tells the test command to serve up whatever assets are at dist
. Whenever the build command rebuilds the test command will detect the changes to the final output, and refreshing your tests page will reflect them. Adding --test-port=0
here tells the test command to pick a random available port to serve on, ensuring we can have multiple test server instances if needed.
Microsoft's Visual Studio Code application (VSCode) is a free and widely used editor for frontend programming (javascript/typescript/html/css/jsx etc.) as well as for some backend languages. Other editors are more specialized for languages like Java (which our backend is written in) so at some point you may want to install a different editor such as IntelliJ if working on backend files.
Download: https://code.visualstudio.com/
Once you have downloaded and launched Visual Studio Code there are a number of plugins/extensions you will want to consider adding and configuring.