--- title: "Build and deploy a front-end application" description: "In this tutorial you'll learn how to build and deploy your first application. To make it easier for you, you won't start from scratch" url: https://docs.ovhcloud.com/pl/guides/public-cloud/data-platform/getting-started-visualize-data lang: pl lastUpdated: 2026-09-14 --- > For AI agents: the complete documentation index is available at https://docs.ovhcloud.com/pl/llms.txt, the full documentation bundle is available at https://docs.ovhcloud.com/pl/llms-full.txt. # Build and deploy a front-end application ## Objective In this tutorial you'll **learn how to build and deploy your first application**. To make it easier for you, you won't start from scratch. We've prepared a template to accelerate the process, thanks to pre-built graphs. Initiate your application from **Application Services** by clicking **Create an application**. ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/homepage-api.png) Select the template _ReactJS - Getting Started_ from the store. This template produces a complete BI dashboard. ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/apps-store-new.png) Fill in the different fields as shown in the screenshot below and press **Confirm**. ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/apps-settings-new.png) Click on **Confirm**, your app will automatically build and deploy. The process should take a couple of minutes, in the meantime feel free to read through the pre-requisites below. ## Requirements Every previous step of the Getting Started guide must have been completed: - The API is up and running. - Queries in the Analytics Manager are properly requesting your data warehouse. - The Lakehouse Manager shows a properly built logical schema. Virtual attributes are created and tables linked. - Your Data Processing Engine workflow has been correctly run. Let's create your first dashboard. ## Set up your canvas Click on the **Dashboard** menu. In an app, dashboards are its pages. A first dashboard, _Rides Analytics_, has been added by default when you selected the template at the beginning. It comes with styles and logos! ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/createdashboard-empty.png) Click on the **house** icon to set it as the default landing page of your app. ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/createdashboard.png) ### Set up a header Head to the **Menus** menu. It is the page where you can define items such as header menus and filters for your whole app. It has already been pre-populated with several pages and items due to the template you used to initiate the app. You should land on the header page. This means every item you add here will be embedded in the header of your app (i.e the upper part). You can switch to the sidebar page (to embed items in the left sidebar of your app) at the top right-hand corner. ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/header-v-sidebar.png) Switch back to the header page. Expand **tabs** to see the container's items. Click on _Add an item_ to add a tab in your header. Select **link**. ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/create-menu.png) Fill in the fields as shown below. You can also define a logo icon for your app header! ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/createmenu2.png) ### Set up a dynamic parameter Dynamic parameters are widgets to **filter your data on your pages**. Here, you will add one dynamic parameter to filter on the date. Click on **Sidebar** on the top right-hand corner and create a container. :::info If you are unfamiliar with [containers](https://docs.ovhcloud.com/pl/guides/public-cloud/data-platform/app-services-apps-menus.md), think of them as folders for items. ::: ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/create-sidebar.png) Drag the new container on top of the footer (which has to be at the bottom). ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/create-sidebar2.png) Open the container then add an item: select **Parameters**. ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/create-sidebar3.png) Pick the _Select box_ one, then head to the **options** of the new parameter. ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/createparameters.png) Fill in the options as shown in the screenshot below. ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/parameters-options.png) In the **Infos** tab, give it the following name: _select\_stations_, and press Confirm. :::info Note that every dynamic parameter like the date picker and select boxes can be customized. To learn how to do that, head to the technical documentation for application components! ::: [ Learn more about dynamic parameters](https://docs.dataplatform.ovh.net/#/en/technical/sdk/app/dynamic_parameters/index). Your canvas configuration is now done. With a menu and a filter, you can now create your first graph. ## Set up a chart Go to the **Dashboard** tab and click on the **Edit** icon on your _Ride Analytics_ dashboard. You can see that the menu and the filter we've just created are well set up here! ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/empty-app-new.png) #### Step 1. Create a panel Click on the ➕ icon to create a panel (**Containers > Panel**). ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/create-panel-new.png) Once it's created, you can resize it so it spans across the screen. ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/create-panel-new2.png) #### Step 2. Give a title to your chart **Inside your new panel**, click on the ➕icon and select **Basic UI > HTML**. ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/create-html-new.png) Name it _Rides history_ and apply the H1 style by clicking on the H button. ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/create-html-new2.png) #### Step 3. Generate your chart Inside your panel, click on the ➕icon and select **Chart**. Pick the _Recharts - Bar_ type. ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/recharts-area-new.png) Click on **Request**, and select **Query selector** to pick the _rides\_per\_month_ query you've created in the Analytics Manager. ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/area-chart-query.png) To complete the setup, you have to connect this chart with the filter we've already created. Go to the **Infos** tab, in the **Linked dynamic parameters** section, and add _select\_stations_. ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/area-chart-parameters.png) You can now test if your filter is properly working. Enter the read-only mode by clicking on the **Play** icon, and modify dates or holiday type to see how your data is changing. Your first chart is done! ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/chart-readonly-new.png) :::info Your first dashboard is now complete. You can also improve its appearance. In our _Getting Further guide series_, we have released more tutorials for you to check out: [click here to learn more about the app builder's capabilities](https://docs.ovhcloud.com/pl/guides/public-cloud/data-platform/tutorials-customize-first-app.md)! ::: ## Build and deploy the new version of your app One last step: put your dashboard into production. First, don't forget to **Save** your dashboard to make sure all your edits are consistently saved ( icon in the top middle bar). ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/save-app.png) Then go back to the **Overview** tab of the Application Manager. Changes brought to your application since you first created it **must be builded** in order to be visible by your end-users. You could stop the currently deployed version to build those changes, but the Platform also allows you to do it [without interruption of service](https://en.wikipedia.org/wiki/Blue-green_deployment).\ First, **Copy** the currently deployed version of the application. ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/copy-app.png) Then you need to name the new version (_v2_ in the screenshot below). ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/enter-tag-name.png) Now, click on **Build**, and then **Deploy**. ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/build-app2.png) :::info The **build** process usually takes a couple of minutes. If you're curious about what is going on or if the build fails, open the log console by expanding the version panel and inspect the logs. Feel free to send logs to our support team if you're not sure how to troubleshoot it yourself! ::: Your app is **live** and can now be accessed online! The link can be obtained in the Overview tab by clicking on **Open**. :::info The [Identity Access Manager](https://docs.ovhcloud.com/pl/guides/public-cloud/data-platform/landing-page-iam.md) lets you configure access rights to your app and your Project administration. ::: ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/open-app.png) ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/dashboard-final-new.png) That's it! Your dashboard is live and accessible by your users. Its data is refreshed automatically every day, stored in the cloud and will always be reliable. **You've completed the Platforms' Getting Started tutorial!** You're now ready to go live on the platform, explore by yourself and take on your own Projects by yourself. Obviously, you can come back to this tutorial at any time! We encourage you to check out the rest of the documentation to dive deeper into a specific component of the product when needed. The next step will consist of discover advanced features of the app builder. [Customize your first app further](https://docs.ovhcloud.com/pl/guides/public-cloud/data-platform/tutorials-customize-first-app.md) Also, don't hesitate to **get in touch** if you need anything, our support & product team is dedicated to helping you deliver faster any AI applications you have in mind. ## Go further If you need training or technical assistance to implement our solutions, contact your sales representative or click on [this link](https://www.ovhcloud.com/pl/professional-services/) to get a quote and ask our Professional Services experts for a custom analysis of your project. Ask questions, give your feedback and interact directly with the team building the Data Platform on the dedicated [Discord channel](https://discord.gg/ovhcloud). If you need support with your OVHcloud services, create a request in our [Help Centre](https://help.ovhcloud.com/csm?id=csm_get_help). Join our [community of users](https://community.ovhcloud.com/).