Express.js

In order for Stringtale to work, a back-end server is required. One of our supported options is Express.js. In this guide we’ll go over the manual implementation of Stringtale using Express.js.

Manual implementation

To use Stringtale in your Express.js application you can either use stringtale init from our CLI or execute the following steps manually.

1. Install the @stringtale/express and @stringtale/react packages in your project using your package manager.

   npm

     npm install @stringtale/express @stringtale/react

   Yarn

     # If you're using a monorepo with workspaces, add it to the right workspace
     yarn add @stringtale/express @stringtale/react

   pnpm

     pnpm install @stringtale/express @stringtale/react

2. Add the /api/stringtale route to your Express.js app. Example:

   import express from 'express'
   import { setupRoute } from "@stringtale/express"
   const app = express()
   
   app.all('/api/stringtale', setupRoute({
     apiKey: process.env.STRINGTALE_API_KEY!
   }))

3. Add STRINGTALE_API_KEY to your environment (for example a .env file). This API key can be obtained from the Stringtale Dashboard.

     STRINGTALE_API_KEY=YOUR_API_KEY

   For more information on how to obtain an API key, please refer to the obtaining an API key guide.

4. Modify the app.js / app.tsx of your React application to provide the Stringtale context to your application.

   Tip

   With Express.js, pass apiRoute so the front-end knows where your Stringtale API lives. To enable additional Stringtale features, check out the StringtaleProvider documentation.

   import { StringtaleProvider } from "@stringtale/react"
   import "@stringtale/react/styles.css"
   
   function App() {
     return (
       <StringtaleProvider apiRoute="https://www.example.com/api/stringtale">
         <div className="App" />
       </StringtaleProvider>
     )
   }
   
   export default App

   For more information about Contexts and Context Providers see this React blogpost and the React documentation.

5. You’re now ready to use Stringtale in your project. For more information on how to use Stringtale with React see our React documentation.