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 with the app router you can either use stringtale init from our CLI or execute the following steps manually.

1. Install the @stringtale/express and @stringtale/react package 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/stringatale route to your routes file in Express.JS. Example:

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

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

3. Modfiy the app.js / app.tsx of your React application to provide the Stringtale Context to your application.

   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.