<%- include('partials/footer') %>
```
```javascript
// ./index.js
var express = require("express");
var app = express();
app.set("view engine", "ejs");
app.get("/", function(req, res){
res.render("index", { title: "My Normal Page With A Standalone Search Box" });
});
app.get("/search", function(req, res){
res.render("search", { title: "My Main Search Page" });
});
app.listen(3000, function(){
console.log("The Standalone Search Box demo application has started!");
});
```
To run the Node.js application
. Ensure that you have [Node.js](https://nodejs.org/en/) installed.
. Create the application folder structure and files (for example, `./index.js`, `./views/index.ejs`, `./views/partials/header.ejs`, etc.)
. From the root folder of the application:
.. Run `npm init` to create a `./package.json` file.
.. Run `npm install ejs express` to install the required dependencies.
.. Run `node index.js` to run the application locally.
. Open [localhost:3000](localhost:3000) in your web browser.
You should then see behavior such as:
## Initializing the standalone searchbox
This subsection provides additional details regarding the initialization of your standalone search box, depending on your use case.
### Embedded in a normal page
Initialize your standalone search box using the [`initSearchbox`](https://coveo.github.io/search-ui/globals.html#initsearchbox) top-level function, as in the basic [example](#example) above.
This function takes the following arguments:
. The root HTML element which contains the component (or components) to initialize (for example, `document.getElementById('searchbox')`).
. The URL of the search page to redirect the search requests to (for example, `+https://example.com/search+`).
**Example**
Consider the following markup:
```html
```
You could initialize this standalone search box as follows:
```javascript
const searchBoxRoot = document.getElementById("searchbox");
Coveo.initSearchbox(searchBoxRoot, "[ENTER URL]");
```
### Embedded in the main search page
You'll likely want to repeat the HTML and initialization code of your standalone search box in the header of several pages, as in the [Node.js Express application example](#nodejs-express-application-example) above.
In that case, you must adapt the initialization process as follows:
. Include additional logic to bypass the `initSearchbox` call when the current page is the search page.
Calling the `initSearchbox` method in the search page itself doesn't make sense;
instead, the `init` top-level function should initialize the search box in the search page.
. Inform the `init` call that some of the components it needs to initialize lie somewhere outside of its target root element by specifying the root HTML element that contains the search box in the `externalComponents` attribute of the second argument of the `init` call `options` parameter (see [Initializing Components External to your CoveoSearchInterface](https://docs.coveo.com/en/346#initializing-components-external-to-your-coveosearchinterface)).
The value of the `externalComponents` attribute must be an array of HTML elements.
**Example**
Suppose the `id` of the root element of your main search page is `search`.
You could bypass the `initSearchbox` function call when the current page is the main search page, and tell the `init` function to initialize the search box as an external component like this:
```javascript
document.addEventListener("DOMContentLoaded", () => {
const mainPageRoot = document.getElementById("search");
const searchBoxRoot = document.getElementById("searchbox");
Coveo.SearchEndpoint.configureCloudV2Endpoint("", "**********-****-****-****-************");
if (mainPageRoot) {
// Initialize the main page, and further initialize the
// standalone search box as an external component
Coveo.init(mainPageRoot, {
externalComponents: [
searchBoxRoot
]
});
} else {
// Initialize only the standalone search box, such
// that it redirects the browser to the main search page
Coveo.initSearchbox(searchBoxRoot, "https://example.com/search");
};
})
```