Edit on GitHub

Mattermost web app workflow

If you haven’t set up your developer environment, please do so before continuing with this section.

Workflow 

Here’s a general workflow for a Mattermost developer working on the mattermost-webapp repository:

  1. Review the repository structure to familiarize yourself with the project.

    • ./actions/ contains Redux actions which make up much of the view logic for the web app.
    • ./components/ contains React UI components and views.
    • ./e2e/ contains end-to-end (E2E) tests writen using Cypress and Playwright.
    • ./i18n/ contains the localization files for the web app. Generally, only i18n/en.json is modified directly from this repo while other languages’ translation files are updated using Weblate.
    • ./packages/ holds subpackages used by the web app and related packages. See the README.md there for more information about its contents.
    • ./packages/mattermost-redux holds mattermost-redux, a package containing much of the shared business logic for the web app.
    • ./reducers/ contains Redux reducers for view state.
    • ./selectors/ contains Redux selectors for view state.
    • ./utils/ holds many widely-used utility functions.
  2. On your fork, create a feature branch for your changes. Name it MM-$NUMBER_$DESCRIPTION where $NUMBER is the Jira ticket number you are working on and $DESCRIPTION is a short description of your changes. Example branch names are MM-18150_plugin-panic-log and MM-22037_uppercase-email. You can also use the name GH-$NUMBER_$DESCRIPTION for tickets come from GitHub Issues in the server repo.

  3. Make the code changes required to complete your ticket, making sure to write or modify unit tests where appropriate. Use make test to run the unit tests.

  4. To run your changes locally, you’ll need to run both the client and server locally. The server and client can either be run together or separately as follows:

    • You can run both together by using make run from the server directory. Both server and web app will be run together and can be stopped by using make stop. If you run into problems getting the server running this way, you may want to consider running them separately in case the output from one is hiding errors from the other.

    • You can run the server independently by running make run-server from its directory and, using another terminal, you can run the web app by running make run from the web app directory. Each can be stopped by running make stop-server or make stop from their respective directories.

    Once you’ve done either of those, your server will be available at http://localhost:8065 by default. Changes to the web app will be built automatically, but changes to the server will only be applied if you restart the server by running make restart-server from the server directory.

  5. If you added or changed any strings you will need to run make i18n-extract to update i18n/en.json. Remember to double check that any newly added strings have the correct values in case they weren’t detected correctly.

  6. Before submitting a PR, make sure to check your coding style and run the automated tests on your changes. Run the following commands in the mattermost-webapp directory (root of the repository): make check-style/npm run check to check the code style, make check-types to run the type checker, and make test to run the unit tests. If there are any problems, you can either fix them manually in the file itself, or use the npm run fix command. This is an important step because if any code is not formatted properly, one of the checks that run when you create a pull request for your branch will fail, and may block merging.

  7. Commit your changes, push your branch and create a pull request.

  8. Respond to feedback on your pull request and make changes as necessary by committing to your branch and pushing it. Your branch should be kept roughly up to date by merging master into it periodically. This can either be done using `git merge` or, as long as there are no conflicts, by commenting /update-branch on the PR.

  9. That’s it! Rejoice that you’ve helped make Mattermost better.

Useful Mattermost commands 

During development you may want to reset the database and generate random data for testing your changes. See the corresponding section of the server developer workflow for how to do that.

Did you find what you were looking for?

Thank you! We appreciate your feedback.
×

Tell us more

Your feedback helps us improve the Mattermost developer documentation.

Have a feature request? Share it here.

Having issues? Join our Community server.