> For the complete documentation index, see [llms.txt](https://docs.growsurf.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.growsurf.com/developer-tools/javascript-sdk/single-page-applications.md).
# Single Page Applications
View sample code and troubleshooting tips for integrating GrowSurf into common JavaScript frameworks such as React and Vue.
{% hint style="info" %}
To test in a sandbox/development environment, we recommend creating two different programs for development and production environments. [Learn more here](https://support.growsurf.com/article/262-how-can-i-test-in-a-sandbox-or-development-environment).
{% endhint %}
## GitHub
[Check out the `growsurf-samples` GitHub repo for sample code](https://github.com/growsurf/growsurf-samples).
## React
Check out the GitHub sample code for React [here](https://github.com/growsurf/growsurf-samples/tree/master/samples/growsurf-react-example) and our [GrowSurf React project](https://github.com/growsurf/growsurf-react-firebase).
### React Component
To initialize GrowSurf asynchronously within your SPA, include the following code within your [React components `componentDidMount()`](https://reactjs.org/docs/react-component.html#componentdidmount) lifecycle event.
{% hint style="info" %}
`componentDidMount()` works only in class components. In a function component, use the [Effect Hook](https://reactjs.org/docs/hooks-effect.html).
{% endhint %}
### Example using Classes
This code adds the GrowSurf Universal Code only on pages that render this component, and once it has [initialized](/developer-tools/javascript-sdk.md#grsfready-event-listener), you can add any [GrowSurf embeddable element](/developer-tools/embeddable-elements.md) to the component's JSX.
{% code title="App.js" %}
```jsx
class App extends React.Component {
componentDidMount() {
const script = document.createElement('script');
script.src = 'https://app.growsurf.com/growsurf.js?v=2.0.0';
script.setAttribute('grsf-campaign', 'jaoh4t');
script.async = true;
document.head.appendChild(script);
}
render() {
return (
)
}
}
```
{% endcode %}
### Example using Effect Hook
{% code title="App.js" %}
```jsx
import {useEffect} from 'react'
function App() {
// GrowSurf Universal Code
const addGrsfScript = () => {
const script = document.createElement('script');
script.src = 'https://app.growsurf.com/growsurf.js?v=2.0.0';
script.setAttribute('grsf-campaign', 'jaoh4t');
script.async = true;
document.head.appendChild(script);
};
useEffect(() => {
addGrsfScript();
}, [])
}
```
{% endcode %}
{% hint style="info" %}
In React, third-party JavaScript SDKs like GrowSurf's are not automatically accessible within the Virtual DOM. To interact with them, you must reference them via the `window` object.\
\
**Example**
```javascript
window.growsurf.getParticipantId();
```
{% endhint %}
## Vue
[Check out the GitHub sample code for Vue here](https://github.com/growsurf/growsurf-samples/tree/master/samples/growsurf-vue-example).
## Troubleshooting
If embeddable elements do not render (typically after a page refresh on an absolute route, depending on how your SPA handles URL routes), call [`growsurf.init()`](https://docs.growsurf.com/developer-tools/javascript-sdk/api-reference#initialize-reinitialize-growsurf) to re-initialize GrowSurf.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://docs.growsurf.com/developer-tools/javascript-sdk/single-page-applications.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.