# Developing with the Workforce Planning Tool

## Getting Started

*Note: This guide will skip [steps about setting up Labor Chart](https://github.com/procore/lc-web-development/wiki/Local-Development) locally for development. Please ensure that Labor Chart is properly running locally on your computer first.*

1. Clone the ui-service-shell repository

git clone [e-mail]:procore/ui-service-shell.git

or

git clone https://github.com/procore/ui-service-shell.git

2. Navigate into the newly cloned repo and install all dependencies
a. cd into the repo: `cd ui-service-shell`
b. [Download asdf](https://asdf-vm.com/guide/getting-started.html#_2-download-asdf)
c. Install packages from .tool-versions: `asdf install`
* Note: Some packages may not be installed "xyz plugin is not installed". You will have to manually add each with `asdf plugin-add xyz` and then run `asdf install` again
d. Make sure that you have the Procore "NPM Access Token" from lastpass added to your `~/.npmrc` file. You'll want to comment out any other tokens except for this one when install dependencies in the ui-service-shell repo. After, you may commment out the Procore token and uncomment the previously used one.
e. Install npm dependencies:`yarn` or `npm install`

3. Create a .env file in the root of the ui-serice-shell repository with the correct environment variables. These can be found in lastpass under "ui-service-shell.env"
4. Change [this line](https://github.com/procore/ui-service-shell/blob/0070ab93667640e07656795dfa3afef1df468e24/public/remote-registry/remote-registry.json#L697) from

"url": "https://lc-web-app-ui-service.pages.procore.com/web-app"

to

"url": "http://localhost:4000/public"

while working locally in the embedded experience

5. Start the development http server

yarn dev or npm run dev

6. In a separate tab still within the ui-service-shell repo, run the docker development proxy

yarn proxy:dev or npm run proxy:dev

7. Confirm that both `lc-web-development` and the `ui-service-shell` are running in docker


8. Check [the health service](http://localhost:8081/webclients/host/health) to ensure things are working in the ui-service-shell.
9. If you receive a 403 "Access to Localhost was Denied" you may need to follow [these instructions](https://stackoverflow.com/questions/69818376/localhost5000-unavailable-in-macos-v12-monterey/69829313#69829313) and restart the ui service shell.
10. Update the procore_id on the local company you use in the postgres db. The value must be a numerical string, but other than that, it is not important. Just remember it for later steps. This ID must match what you put in the url for the next step.

update companies set procore_id: '1' where id='your local company id'

11. You will also need to update the `procore_company_id` field for your Laborchart company in gatekeeper as well. You can do this through docker
12. You will need to make sure you can authenticate against procore for local development, so ask a fellow dev to invite you to the [Internal Workforce Planning Sandbox Company](https://sandbox.procore.com/34093/company/home/list) directory. You'll want to use your email `[e-mail]` and be sure to check your procore gmail and accept the invite.
13. Once you are into the Procore company, also make sure to add your sandbox email to the local Laborchart company.

[e-mail]

14. Confirm the experience is working. You should be able to navigate to:

http://localhost:8081/webclients/host/companies/1/tools/workforce-planning/home