Setting up the platform-client for development

What is the platform client?

The web client is the component that end-users interact with when opening the Platform website with a web browser. The client interacts with the API in order to perform operations on the system (i.e. submit posts, query posts).

The web-client is built on the Angular 14 framework.

Setup

Prerequisites:

  • The platform API is set up and ready

  • Install Node V16.x or higher (you might want to use NVM for this) before continuing. You can download Node.js from the official website: https://nodejs.org

  • Ensure you have the latest version of Git Installed In Your System. You can download Git from the official website: https://git-scm.com/downloads

Get started:

  1. Clone the code (if you plan to make contributions to Ushahidi, consider forking the repository before starting, more about that here).

  2. Locate the env.json file located in the apps/web-mzima-client/src directory.

  3. Locate the file env.json . This file contains a crucial variable called backend_url . This variable is used to configure the client with the URL to use, in order to send HTTP network requests to the Platform API. If this variable is wrong, nothing works. If you have installed the Platform API using our guide, change the URL to "http://localhost:8080". All the other variables are often not required to specify, as they have sensible defaults.

  4. In the terminal, make sure you are in the same folder as you cloned your code into and run npm install

  5. After installation is complete, run npm run web:serve. This command starts a development server and at this point, the client should be available to the view on the address http://localhost:4200/ (In case another application uses port 4200, angular redirect you to a different port). You can now interact with it for testing and development purposes. Any changes you make to the code will be automatically reflected in the browser.

  6. The default user credentials when running your local development environment is: user email: admin@example.com password: admin

PreviousSetting up the API with Docker

Last updated