This is an end-to-end guide for connecting your codebase with Frontitude. If you're looking for technical documentation, read our npm package docs.
Frontitude’s Developer CLI helps you connect the design process with the code. Using this integration, developers can fetch copy updates from the design and localization teams, and automatically integrate them with the codebase.
This integration eliminates the copy-and-paste when moving texts from design to code and saves both design and development teams a great deal of time and resources.
💡 Make sure you store strings in a separate file in your codebase or are prepared to consume them that way (using libraries like react-i18n). See our demo project to gain a better understanding of the requirements.
Join the team’s workspace
First, as a developer, you need to join your team’s workspace as a collaborator so you can have read access to all your team’s copy.
If you’re the first team member who is trying Frontitude, you can sign up and skip this. If your team is already using Frontitude, ask one of your team members to invite you as a collaborator to the workspace.
Read the roles and permissions guide to learn how to invite collaborators to a Frontitude workspace.
Make sure copy is set with unique keys
Before you connect your codebase with Frontitude, you need to set copy elements with a unique key, so that you will be able to reference them from the code.
Usually, it’s the design team that needs to set those keys, but as a workspace collaborator, you’ll be able to do this as well. If keys are not set, copy will be pulled with auto-generated keys that are not human-readable.
Learn how to set copy with unique keys.
Install and configure the CLI
Install the CLI
The CLI can be installed from any terminal that has Node and npm installed. Visit Frontitude’s CLI npm package page to complete the installation.
Run the init command
> frontitude init
Set the projects to connect: Select using the keyboard arrows and spacebar which Frontitude projects you’d like to connect with the current repository. This will tell Frontitude which projects the CLI should fetch copy updates. You can also choose to connect the workspace’s copy library which holds all the product’s copy.
Once finished, configurations are saved to frontituderc.json (under the project’s root folder). Push it to the remote repository if you want to share them with other developers and build processes (recommended).
💡 The CLI automatically detects the strings file format and is ready to update it without any further configuration. See the supported file formats at the bottom of this guide.
Fetch the latest copy edits to the codebase
> frontitude pull
Once you set the connected projects, set unique keys to copy, and set the strings file location, you can run the pull command to fetch the new content into a fresh new strings file (created automatically) or an existing one.
This command supports a few options (technical information can be found in our npm package docs):
- Filter by status: Draft, Review, Final, or All (default).
- Filter copy with/without keys: You can pull only copy that has a unique key, or pull everything. Copy element that doesn’t have a key will be set with an auto-generated one (for example: frontitude-2a15bb13).
- Dry-run the pull command, so you can review the results in the CLI without creating or updating any files.
- Include translations: Include translations stored in Frontitude as part of the pull command, and update the local translation files.
The next step is to identify what has been merged into the code, to understand what copy has been added or changed.
Push updates to the remote repository
Now you can use the keys and integrate them into the UI components and push the updates to the remote repository.
That’s it! You have closed the circle and now you can get copy updates from the design directly to your codebase. Whenever the design team finalizes copy, you can run the pull command to automatically fetch and merge them into the code!
Supported file formats and libraries
Frontitude’s CLI currently supports the following file formats:
- JSON
- XLIFF (iOS)
- Android XML
The CLI works with any library that supports the i18n standard. If you need support in other formats, please contact us at hi@frontitude.com.
