h npm run test.
Within the src directory, there are a few subdirectories. The components directory contains all of the views for the application. In this case, VueJS is acting as the view. The components directory is subdivided into multiple directories based on the purpose of the component. The interfaces directory contains the TypeScript interfaces for the application. These are used heavily throughout the application and typically mirror the toJSON() method of the RiPPLE Server models. The repositories directory contains entities which are responsible for retrieving the external data required by the application. It is encapsulated into a single place because it (1) provides a substitution point for testing (2) allows for a flexible system architecture for easier ’plugging-in’ to changing parts (e.g., mocking data on client vs. retrieving from server), and (3) is consistent and predictable, which in turn provides for a better developer experience. Typically, the repositories are only interacted with from the services. This top-down approach is consistent with the Vue framework. the routes directory defines the routes of an application such that a URL will map to a Vue component. This is necessary in single-page applications which are dependent on state. The services directory contains a service layer which aims to encapsulate all of the business logic of the application. Given the asynchronous nature of the application, a subscription system called Fetcher also exists here. Finally, the style directory contains global CSS styles for the application.
6.2 Deployment of the RiPPLE Client
The RiPPLE client architecture is relatively simple, however it does need some configuration to work correctly.
6.2.1 Installing Dependencies
From your terminal, make sure you can access both nodeJS (node –version) and npm (npm –version). If not, you will be unable to continue. This project ships with a package.json file, which details all of the modules required to build and run the application. The simplest way to install them all is to run npm install from your terminal.
npm will automatically read the package.json file and install everything it requires. Generally you only need to do this once, but if new dependencies are added you will need to re-run npm install.
6.2.2 General Configuration
RiPPLE client side will read its configuration from what is called an environment variable. These variables are injected into the application at runtime by replacing all instances of process.env.* with the name of predefined variable. These predefined variables are things such as debug mode and where to look for the API. Since environment variables can sometimes be sensitive (such as database passwords), it is best practice to keep them out of source control.
RiPPLE reads its environment variables from environment files, which are named .env.dev, and .env.prod for development and production respectively. In a fresh install, the .env.dev and .env.prod files will not exist (since they are not in source control). Instead, a .env.example file is provided which has all of the possible environment variable names, and example values for them.
If you make your own .env.dev or .env.prod files, you can place whatever you like in it, and your git client will automatically ignore anything inside of it. Supported environment values include the following:
API_LOCATION - string: A URI which points to the RiPPLE Server. Should not have a trailing ’/’.
Node_ENV - string: A string indicating the development environment as PRODUCTION or DEVELOPMENT.
6.2.3 Development Configuration
Typically, a RiPPLE client in development mode will connect to a Development RiPPLE Server (See Section 7). By default, this will be http://localhost:9000. You will need to initialize your .env.dev environment file to development values. Once your environment file has been created and your [dependencies installed ]RiPPLE-Client—Environment) you will be able to build and test your application. The key command for active development is npm run dev, which builds your application and opens it 