Workflow

The following workflow has proven helpful for incorporating Stringtale into your process after you’ve completed Installation.

For developers

Initial setup and usage

1. Integrate Stringtale and deploy it to your test / preview environment. Follow the Installation guide if you haven’t already.
2. Let your editors make the changes they require (see For editors).
3. Either use stringtale pull to pull their changes into your source code, or let our GitHub Action create a pull request when new edits are available.
4. Review the changes and merge them into your codebase, ready for release with the next update.

Adding new static text to your project

At some point during the development of your project you’ll have to add new static text. The easiest way to achieve this is by using the ESLint plugin or the VS Code extension.

1. Create your component with the static text.
2. Select the text you’ve just added.
3. Use the ESLint plugin or VS Code extension in your code editor to wrap the text in a <Value> tag with an automatically generated name attribute.
4. The name attribute is used to store updates in Stringtale’s database and retrieve them once the text has changed.

   Changing the name attribute

   You can alter a <Value>’s name attribute if preferred. We recommend you only change it on initial implementation to avoid synchronization issues.

Pulling in changes that have been made externally

1. Use stringtale pull to pull in the latest changes from Stringtale.
2. You’ll notice that any updated <Value> tags will now have a version attribute. This is what the CLI uses to determine if the text has to be updated or not. You should not update the version attribute manually.
3. Once you’ve reviewed the changes, you can commit them to the repository, ready for the next update.

Manually updating text in your codebase

When using Stringtale, you’re not limited to text changes through the browser. It’s still entirely possible to make changes directly in your codebase. Change the text in your source and commit it to your repository. There’s no need to manually add or update the version attribute. The version attribute is only used to determine if changes from outside the repository have been made and need to be pulled in.

For editors

For editors we’ve streamlined the experience by developing a browser extension. This is the user-friendly alternative to appending ?stringtale to the URL. This also has the added benefit of not having to reload the page to make changes.

Editing static text

1. Install the browser extension from the Chrome Web Store. For more information see our browser extension guide.
2. Navigate to the project’s test / preview environment.
3. Click on the Stringtale button in your browser’s toolbar.
4. Make changes to the Stringtale-enabled text on the page.
5. Once you’ve finished making changes, click on Save changes to save them to Stringtale, ready for the developer to integrate with the next update.

Tip

Lock down your test / preview environment (for example with basic auth). When using a write-enabled API key without editor login, anyone who can reach the environment and activate Stringtale can edit Stringtale-enabled text. You can also require editor logins by enabling login on your API key. For more information, see the browser extension guide.