To quickly and easily connect to a MongoDB database, Flexmonster recommends using our Flexmonster MongoDB Connector, which is based on our custom data source API.
The Connector needs to be embedded into a middle-layer server that accepts requests from Flexmonster and passes them to the Connector. The Connector then fetches the required data and sends it back to the server, then finally the data reaches Flexmonster and gets displayed in your browser.
To demonstrate how the Connector, the server, and Flexmonster cooperate, we have prepared a ready-to-use sample project. Using this project as a starting point, you can also connect to your MongoDB database.
Step 1. To get our sample project, download it as ZIP or clone it with the following command:
git clone https://github.com/flexmonster/pivot-mongo && cd pivot-mongo
Step 2. Install the npm dependencies described in package.json:
npm install
Step 3. Run the server with the following commands:
npm run build
npm run start
Now that the server is running and ready to accept Flexmonster’s requests, you can open client/index.html in the browser to see the Connector’s output.
Note In this tutorial, you connected to Flexmonster’s sample database. To connect to your own database, follow the steps from the section below.
You can use the sample project as a starting point to connect to your MongoDB database. To accomplish this, complete the following steps:
Step 1. Open src/controller/mongo.ts and replace the existing connection string with yours. For example:
MongoClient.connect("mongodb://localhost:27017", {
// ...
});
If you are using Node.js 17 or later, change localhost to 127.0.0.1 when connecting to your local MongoDB instance. For more information, see this thread.
Step 2. Then replace the database name with yours:
dbo = db.db("your_database_name");
Step 3. optional If needed, you can configure caching and logging for the MongoDB Connector. Learn more about the Connector’s configurations.
Step 4. In client/index.html, replace the index value with your collection’s name:
report: {
dataSource: {
type: "api",
url: "http://localhost:9204/mongo",
index: "your-collection-name"
}
}
Step 5. Run the server with the following commands:
npm run build
npm run start
Now the data from your MongoDB database is displayed when you open the client/index.html file in a browser.
You can take our sample project as a ready template and make it work for your application by adding your logic, improving, and expanding the project.
To learn how to embed the Connector into your server, have a look at this tutorial:
If your data contains non-Latin characters, ensure you have set UTF-8 encoding for your data and page so the data is displayed correctly in the component.