**Source URL:** https://general.veevavault.dev/safety/custom-pages/getting-started/server-quickstart.md

# Server Quickstart

Add server code to your Custom Page using Vault Java SDK to retrieve data and pass it to the client code when the Custom Page loads.

This guide builds on the client side code from the [Client Quickstart](/custom-pages/getting-started/client-quickstart) tutorial.

## Prerequisites {#prerequisites}

To follow this tutorial, you need:

* [Java SDK pre-requisites](/vault-sdk/getting-started/prerequisites)

* [A working Java SDK project](/vault-sdk/getting-started/)

* [Complete the Client Quickstart](/custom-pages/getting-started/client-quickstart)

## Adding a Page Controller {#adding-a-page-controller}

To retrieve and manage Vault data on the server, implement a `PageController` in your server code.

The following example defines the `onLoad()` method. When a user loads a Custom Page in Vault, this custom method creates and returns the currently authenticated user’s ID with name `userId`.

From the root of your project:

<Steps>
1. Add a Java class `src/main/java/com/veeva/vault/custom/HelloWorld.java` to the root directory of your project.

2. Add the following server code to construct a `JsonObject` to return the user ID:

```
package com.veeva.vault.custom;

import com.veeva.vault.sdk.api.core.RequestContext;
import com.veeva.vault.sdk.api.core.ServiceLocator;
import com.veeva.vault.sdk.api.executeas.ExecuteAs;
import com.veeva.vault.sdk.api.executeas.ExecuteAsUser;
import com.veeva.vault.sdk.api.json.JsonService;
import com.veeva.vault.sdk.api.page.PageController;
import com.veeva.vault.sdk.api.page.PageControllerInfo;
import com.veeva.vault.sdk.api.page.PageLoadContext;
import com.veeva.vault.sdk.api.page.PageLoadResponse;

@ExecuteAs(ExecuteAsUser.REQUEST_OWNER)
@PageControllerInfo()
public class HelloWorld implements PageController {
    @Override
    public PageLoadResponse onLoad(PageLoadContext context) {
        JsonService jsonService = ServiceLocator.locate(JsonService.class);
        return context.newLoadResponseBuilder()
                .withData(jsonService.newJsonObjectBuilder()
                        .setValue("userId", RequestContext.get().getInitiatingUserId())
                        .build())
                .build();
    }
}

```

</Steps>

## Updating Client Code {#updating-client-code}

You can now update your client code to retrieve the `userId` value from the `PageController` you implemented in the previous step. The following example retrieves the data parameter containing the currently authenticated user’s ID and displays it on the Custom Page.

<Steps>
1. From your `hello-world` directory, replace the contents of `/src/hello-world.jsx` with the following code::

```
// src/hello-world.jsx
import React from 'react';
import { createRoot } from 'react-dom/client';
import { definePage } from '@veeva/vault';

export default definePage(({ data = {}, element }) => {
    const root = createRoot(element);
    root.render(
        <div>Hello user {data.userId}!</div>
    );
});

```

</Steps>

## Deploying Server Code {#deploying-server-code}

Use the [Vault Java SDK Maven plugin](https://github.com/veeva/vaultjavasdk-maven-plugin) to deploy the server code.

From the root of your project:

<Steps>
1. Obtain a valid [API Session ID](/vault-api/getting-started/authenticating)

2. Deploy the Java server code using the [Vault Java SDK Maven plugin](https://github.com/veeva/vaultjavasdk-maven-plugin):

```
mvn vaultjavasdk:clean vaultjavasdk:package vaultjavasdk:deploy

```

</Steps>

## Deploying Client Code {#deploying-client-code}

You can now deploy your client code distribution to Vault using Vault API.

From your project root:

<Steps>
1. Obtain a valid [API Session ID](/vault-api/getting-started/authenticating)

2. Build and deploy your client code distribution:

<Tabs><TabItem label="Windows">
```
cd client\hello-world
rmdir /s /q dist && node esbuild.mjs
7z a -tzip hello-world.zip dist distribution-manifest.json
curl -L https://%HOST%/api/v25.1/uicode/distributions ^
-H "Authorization: $SESSION_ID" ^
-F "file=@hello-world.zip"

```
</TabItem><TabItem label="Mac">
```
cd client/hello-world
rm -rf dist && node esbuild.mjs
zip -rq hello-world.zip dist distribution-manifest.json 
curl -L https://$HOST/api/v25.1/uicode/distributions \
        -H "Authorization: $SESSION_ID" \
        -F "file=@hello-world.zip"

```
</TabItem></Tabs>

</Steps>

## Updating Custom Page Configuration {#updating-custom-page-configuration}

Use MDL to update the `Page` configuration to use the server code you uploaded. This example uses cURL:

<Tabs><TabItem label="Windows">
```
curl -L https://%HOST%/api/mdl/execute ^
-H "Content-Type: text/plain;" ^
-H "Authorization: $SESSION_ID" ^
-d "ALTER Page hello_world__c (page_controller('Pagecontroller.com.veeva.vault.custom.HelloWorld'));"

```
</TabItem><TabItem label="Mac">
```
curl -L https://$HOST/api/mdl/execute \
        -H "Content-Type: text/plain;" \
        -H "Authorization: $SESSION_ID" \
-d 'ALTER Page hello_world__c ( 
   page_controller('\''Pagecontroller.com.veeva.vault.custom.HelloWorld'\'')
);'

```
</TabItem></Tabs>

## Viewing Your Custom Page {#viewing-your-custom-page}

View your Page at: `https://$HOST/ui/#custom/page/hello-world`.

You should see "Hello user 1234!" but with your Vault user ID.

Congratulations! You successfully created a Custom Page with server code using Vault Java SDK!

## Continued Learning {#continued-learning}

Now that you've finished the Getting Started, you can learn more about how to [configure Custom Pages](/custom-pages/guides/page-configuration/) in Vault to control access to which Vault users can view your Custom Page. You may remember this from step three in the [Custom Pages overview](/custom-pages/overview), which is also the task we completed when [deploying client code](../client-quickstart/#deploying-your-client-code).

You can also learn more about how to use `@veeva/vault` Web SDK package when [developing client code](/custom-pages/guides/developing-client-code), or learn more about how to use Vault Java SDK's `PageController` interfaces when [developing server code](/custom-pages/guides/developing-server-code).



---

**Previous:** [Client Quickstart](/safety/custom-pages/getting-started/client-quickstart)  
**Next:** [Guides](/safety/custom-pages/guides)