Rentsync UI Docs

# Getting Started

# Requirements

  1. NPM_TOKEN env variable -> Set for your account.

  2. yarn -> install yarn onto your machine. The monorepo requires Yarn to conduct various commands. Please use this guide if you do not have yarn set up(opens new window)

# Installation

  1. Clone the repo

  2. cd into the cloned repo and run yarn init-repo. This will install dependencies and link your local packages together (ex: Admin UI links to our Component library package)

  3. Projects can be run locally - see the root package.json for quick commands. We use the docker files for deployment purposes.

# Directory Structure

  • All projects are contained in the /packages directory. All commands can be run against these projects using lerna or yarn workspace.
  • When referencing a package, it is referenced through its name in its package.json.

# Set an NPM_TOKEN Environment Variable on Your Machine

# Linux

You will need an NPM token for our private repositories to install dependencies from. This token should be set up as a local environment variable on your machine to allow for both local and containerized development.

Talk to one of your dev colleagues if you don't have one of these token.

To install your token as an environment variable:

  1. Open your terminal and edit ~/.profile. Example with VSCode: code ~/.profile
  2. At the bottom, add this line: export NPM_TOKEN=<yourtoken>
  3. Save the file
  4. Log out of your machine then log back in for the variable to be set.

# Windows

Much easier. Search Edit System Environment Variables in the main Windows Searchbar. Ths is a window you can open with a list of environment variables. You need to add NPM_TOKEN to these variables.

# Working with project ENV

  • We must load environment variables differently from our servers. Please see instructions below for Admin UI:

# Admin UI Environment Variables

  • Environment variables are created in an env.js file. TREAT THIS LIKE A TRADITIONAL .env. DO NOT COMMIT THIS FILE TO GIT.
  • While working with Admin UI and other Vue projects, add environment variables to the window.APP_CONFIG object of src/public/env.js:
window.APP_CONFIG = {
  VUE_APP_ENV: 'development',
  VUE_APP_GMAPS_API_KEY: 'abc123',
}
  • On startup, the Admin UI will load this env into the Vue instance's $env global object. You can then reference your env in a component file as $env.VUE_APP_ENV.
  • Outside of .vue components, these variables can be referenced through the window.APP_CONFIG object.
  • During deployment, these environment variables are added via Vault to the Docker container, then the container spins up a server to serve the built Vue application, sending along a env.js file for the Vue app to read.
  • We are essentially mimicking this process by creating env.js in /src/public to work with environment variables locally and in the same way as our deployed Vue app would.
  • NOTE: ALL ENVIRONMENT VARIABLES IN env.js MUST BE PREFIXED WITH VUE_APP.

# Launching apps locally

Admin UI - yarn admin-dev

Storybook - yarn storybook-dev

  • TIP: Add start scripts for other projects to the root package.json

# CLI Use Examples

  • Run the build npm script in all packages that have a build script: npx lerna run build --stream
  • Run the build npm script in package rs-components: npx lerna run build --scope rs-components --stream OR yarn workspace rs-components build

# Resources

Monorepo/Vue App Flow and Principles →