Workflow

Getting started with new technology can be challenging. The following workflow has proven helpful for people to incorporate Stringtale into their workflow.

For developers

Initial setup and usage

To get started, you have to integrate Stringtale into your code base and deploy it to your test / preview environment.

1. Use stringtale init to integrate Stringtale into a new or existing project. For the full guide on how to use this command, please refer to the getting started.
2. Create an API key in the Stringtale Dashboard.
   1. Go to Projects
   2. Open the project (or click on Edit project settings) you want to deploy to your test / preview environment.
   3. Scroll down to Tokens
   4. Click on Add Token and create a new token
   5. Save the token somewhere safe, you’ll need it later.
   6. Enable ‘Write’ permissions for the newly created token by checking the checkbox for ‘Can write’.
3. Deploy your project to your test/preview environment. Add the token you just saved as the environment variable STRINGTALE_API_KEY.
4. Stringtale will now be available in your test / preview environment.
5. Let your client make the changes they require.
6. Either use stringtale pull to pull their changes to your source code or let our GitHub action create a pull request on your next commit.
7. Review the changes and accept them to your code base, ready for release with the next update.

Adding new static text to your project

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

1. Create your component with the static text.
2. Select the text you’ve just added.
3. Use the plugin / extension for your editor to wrap the text in a <Value> tag with an automatically generated name attribute.
4. The name attribute will gets used to store updates in the Stringtale’s database and retrieve those 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 deterine if the text has to be updated or not. You should not update the version attribute manually.
3. Once you’ve reviewd the changes, you can commit them to repository, ready for the next update.

Manually updatting text in your code base

When using Stringtale, you’re not limited to text changes through the browser. It’s still entirely possible to make changes directly in your code base. In order to change the text inside your code base, you only have to change the text in your code base 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 your clients

For clients 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 text on your website.
5. Once you’ve finished making changes, click on Save changes to save them to Strintale, ready for the developer to integrate with the next update.

Tip

It’s highly recommended you lock down your test / preview environment through some form authentication (i.e. basic auth), as there’s no user authentication for text edits in Stringtale at this moment.