**Source URL:** https://general.veevavault.dev/custom-pages/getting-started/client-quickstart.md # Client Quickstart Learn how Custom Pages work by writing and deploying your first Custom Page without server code. The page will display the text "Hello World!" in Vault. In this tutorial, you will learn how to: * Install the dependencies required to build this example. * Create the client code for a Custom Page using React. * Build and deploy your client code to a Vault. * Create and view your Custom Page in Vault. ## Prerequisites {#prerequisites} To follow this tutorial, you need: * [Node.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) installed globally * A sandbox Vault with full Admin and code permissions ## Installing Dependencies {#installing-dependencies} Start from an empty directory that will be the root of your project. To install dependencies: 1. Create a directory for your client code and this Hello World sample: ``` mkdir client\hello-world && cd client\hello-world ``` ``` mkdir -p client/hello-world && cd client/hello-world ``` 2. Install the Vault npm package: ``` npm install https://vault-web-sdk-releases-public.s3.us-west-2.amazonaws.com/main/veeva-vault-26.1.0-release.1.3.5.tgz ``` 3. Install [React](https://react.dev/) and [react-dom](https://www.npmjs.com/package/react-dom) for the runtime: ``` npm install react react-dom ``` 4. Install [esbuild](https://esbuild.github.io/) to bundle your code: ``` npm install --save-exact --save-dev esbuild ``` ## Developing Client Code {#developing-client-code} Building a custom page in Vault starts with defining the page using JavaScript. The following client code for this sample project is written in React and produces a `
` element containing the text "Hello World!" Learn more about [developing client code](/custom-pages/guides/developing-client-code/). From your `client/hello-world` directory: 1. Create a file for your client code in `src/hello-world.jsx`: ``` mkdir src && echo. > src\hello-world.jsx ``` ``` mkdir src && touch src/hello-world.jsx ``` 2. Add 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(({ element }) => { const root = createRoot(element); root.render(
Hello World!
); }); ``` ## Creating a Manifest File {#creating-a-manifest-file} The `distribution-manifest.json` file describes a client code distribution for your client code. It defines the name of your Custom Page and the path to the built code. Learn more about [creating a client code distribution](/custom-pages/guides/developing-server-code#client-code-distributions). From your `client/hello-world` directory: 1. Create a file named `distribution-manifest.json`: ``` echo. > distribution-manifest.json ``` ``` touch distribution-manifest.json ``` 2. Add the following to this file: 1. `name`: Name of your distribution 2. `pages.name`: Name of your page 3. `file`: Path to the built (not source) code for your page. You will bundle your source code in the next step. ``` // distribution-manifest.json { "name": "hello_world__c", "pages": [ { "name": "hello_world__c", "file": "dist/hello-world.js" } ] } ``` ## Building Your Client Code {#building-your-client-code} Before you can deploy your code, you will bundle it using esbuild and package it as a ZIP file. From your `client/hello-world` directory: 1. Create a file named `esbuild.mjs`: ``` echo. > esbuild.mjs ``` ``` touch esbuild.mjs ``` 2. Add the following to this file to specify the source file containing your page export and define how your code is bundled: ``` // esbuild.mjs import * as esbuild from 'esbuild'; await esbuild.build({ entryPoints: ['src/hello-world.jsx'], bundle: true, sourcemap: true, outdir: 'dist', format: 'esm', }); ``` 3. Build your code using esbuild: ``` node esbuild.mjs ``` 4. Zip the directory that contains your bundled code, and include the distribution manifest file: ``` 7z a -tzip hello-world.zip dist distribution-manifest.json ``` ``` zip -rq hello-world.zip dist distribution-manifest.json ``` ## Deploying Your Client Code {#deploying-your-client-code} Now, it’s time to deploy your client code distribution to Vault using Vault API. From your `hello-world` directory: 1. Obtain a valid [API Session ID](/vault-api/getting-started/authenticating). 2. Upload the distribution ZIP using Vault API. This example uses cURL: ``` curl -L https://%HOST%/api/v25.1/uicode/distributions ^ -H "Authorization: $SESSION_ID" ^ -F "file=@hello-world.zip" ``` ``` curl -L https://$HOST/api/v25.1/uicode/distributions \ -H "Authorization: $SESSION_ID" \ -F "file=@hello-world.zip" ``` 3. Create a [`Page` component](/mdl/component-reference/component-types/page) in the Vault configuration using [MDL](/mdl/). This example uses cURL: ``` curl -L https://%HOST%/api/mdl/execute ^ -H "Content-Type: text/plain;" ^ -H "Authorization: $SESSION_ID" ^ -d "RECREATE Page hello_world__c (label('Hello World'),url_path_name('hello-world'),page_client_code('Pageclientcode.hello_world__c'),client_distribution('Clientdistribution.hello_world__c'));" ``` ``` curl -L https://$HOST/api/mdl/execute \ -H "Content-Type: text/plain;" \ -H "Authorization: $SESSION_ID" \ -d 'RECREATE Page hello_world__c ( label('\''Hello World'\''), url_path_name('\''hello-world'\''), page_client_code('\''Pageclientcode.hello_world__c'\''), client_distribution('\''Clientdistribution.hello_world__c'\'') );' ``` ## Viewing Your Custom Page {#viewing-your-custom-page} View your Page at: `https://$HOST/ui/#custom/page/hello-world`. You should see “Hello World!” printed below your Vault’s navigation bar. Congratulations! You built your first Custom Page client code from scratch! ## Next Steps {#next-steps} Continue to the [server quickstart](/custom-pages/getting-started/server-quickstart/) to add Vault Java SDK server code to your Hello World project. --- **Previous:** [Sample Code](/custom-pages/getting-started/sample-code) **Next:** [Server Quickstart](/custom-pages/getting-started/server-quickstart)