Build a content portal using Box UI Elements, React, Tailwind CSS & Vercel Part 2
Welcome to part 2 of our Box content portal series. In today’s tutorial, we will be taking the default portal to the next level — by adding a new page that uploads content to a folder in Box.
This is a sequential tutorial series, so if you haven’t followed part 1 — make sure to go back and do that! If you just want to read along, continue on.
Walkthrough
In the last part, recall that we setup and deployed a React site to Vercel. You can use a dummy email, alongside a developer token to login to secured pages that display either a Content Explorer or Preview Box UI Element.
The Content Explorer displays a folder to the user with financial statements, and the Preview element displays a Terms & Conditions file to the user.
Today, we are going to add a third tab or page called Upload Loan Documentation. This will serve as a space for clients to provide financial officers at Increo Financial with the appropriate documentation for getting a new loan.
Let’s get started!
🚨IMPORTANT NOTE 🚨
This demo is for demonstration purposes only and is not production-ready. It lacks complete authentication measures, making it unsuitable for live environments without further development.
Prerequisites
In order to complete part 2 of the tutorial, you’ll need the following in addition to what you had for part 1:
Clone the Code
To begin customizing the portal, we need to get the code locally installed and running on your machine.
You can access the repository that Vercel made for you during the deployment process one of two ways: the repository button on the Vercel project’s home page or just going straight to the repository in your GitHub account.
Clone the code to your local machine, by running the following. You’ll need to change the slug at the end to match the one that was created. If you want to place the code in a certain spot, make sure to change to another directory first.
git clone https://github.com/your-repository-url.gitChange to the new directory that was created. Again, your folder will match the slug of the repository that was created.
cd your-repository-directoryIf you are using VS Code and have the terminal extension configured, you can run the below to open the downloaded folder in the IDE. Otherwise, you’ll need to open it manually via Finder or Explorer.
code .Once code is open, you can open a terminal within the IDE.
This code repository uses Node 18.18.0. In order to manage multiple Node versions on a machines, it is recommended to use Node version manager or nvm. Find out more about installing that here. Once that has been installed, install 18.18.0. Then, set your current Node setting to 18.18.0 using the command snippets below.
If you close your VS Code or terminal window and come back, you will need to run the use command again — or the code will not run.
nvm install 18.18.0
nvm use 18.18.0This code repository uses pnpm to manage packages. In the VS Code terminal, run the below command to install pnpm globally. Then, install the packages for the project.
npm install -g pnpmpnpm installRun the below command to copy the example env file to the directory.
cp .env_example .envOpen the newly created file. We need to copy the same environment variables we added to Vercel during the initial deployment. No quotes are required. Quick tip — you can find the enviornment variables in the settings tab of your Vercel project, and just copy paste them over to your env file!
Obviously, in a real world scenarios you will probably have different values for a live production site vs a local machine vs a staging implementation. For this example, I’m just using the same.
Make sure to save the file!
To run the project locally, let’s use the Vercel CLI. If you’re using the Vercel CLI for the first time, install it locally using the command below.
npm i -g vercelBefore running the code, confirm that http://localhost:3000 has been listed in your CORS configuration section in the Box Developer Console.
Next, run the below command to run the portal locally. The first time, Vercel will ask you to login. Follow the prompts. The CLI will then ask you to connect the local code to a deployed Vercel project. Similar to the code snippets shown below the command. Make sure to say Y to link to existing projects!
vercel dev? Set up and develop “~/projects/box-custom-portal-demo”? (Y/n) y
? Which scope should contain your project? (Use arrow keys)
❯ github-user's projects? Link to existing project? (Y/n) yes
? What’s the name of your existing project? box-portal-demo-forkAfter it builds, visit http://localhost:3000 . You should see the login page. You can login with a dummy email and a developer token grabbed from the application configuration tab. If everything is successful, you should be able to see a statement in the statements tab and the terms and conditions file in that tab.
Hit CNTL + C in the terminal to stop the code from running while we make some changes in the next section.
Add Uploader UI Element
Now that we have the code downloaded and running locally, let’s add a new page, test it, and deploy it out to the live site on Vercel! This page or tab will serve as a place for customers to upload documentation that is saved behind the scenes in Box.
While this example does not include the other business logic surrounding loan documentation uploads, it could easily be added. For example, creating a new folder for each new application or adding form inputs that is saved as Box metadata on the application.
I have made it pretty easy to add a new page, since there is some commented out code already there for you to use. You can use this as inspiration to add any number of pages as practice.
Find the config.json file in the public folder. This file serves as a one stop shop for several customizations — but more on that later. For now, let’s add the below code to the navigation array. The title field is editable, but for this example lets use “Upload Loan Documentation.”
,{
"page": "UploaderPage",
"title": "Upload Loan Documentation"
}
Under the pages directory, create a new file called uploader.js. Copy paste the code from the snippet below. You can also drag and drop the file from the solution directory. If you do this, ignore the second file in the solution directory. We will use that in the next part! Make sure to save the file.
import React from "react";
import ContentUploader from 'box-ui-elements/es/elements/content-uploader';
import { IntlProvider } from "react-intl";
import AnimationRevealPage from "helpers/AnimationRevealPage.js";
import tw from "twin.macro";
import { css } from "styled-components/macro"; //eslint-disable-line
import Header from "pages/header.js";
import styled from "styled-components";
import imageSrc from "images/reliable-icon.svg";
import { getConfigValues } from "./helper"
const TwoColumn = tw.div`flex flex-col md:flex-row justify-between max-w-screen-xl mx-auto py-20 md:py-24 items-center `;
const Column = tw.div`w-full max-w-md mx-auto md:max-w-none md:mx-0`;
const ImageColumn = tw(Column)`md:w-1/6 flex-shrink-0 relative`;
const Image = tw.img`max-w-full w-96 rounded-t sm:rounded relative z-20`;
const TextColumn = styled(Column)(props => [
tw`md:w-5/6 mt-16 md:mt-0 h-128`,
props.textOnLeft ? tw`md:mr-12 lg:mr-16 md:order-first` : tw`md:ml-12 lg:ml-16 md:order-last`
]);
//using session storage is not secure. you will want to change this functionality for production
const token = sessionStorage.getItem('token');
export default () => {
//storing variables in the front end is not secure. you will want to grab this value from a database for production
let folderID = process.env.REACT_APP_BOX_UPLOADER_FOLDER_ID
return (
<AnimationRevealPage>
<Header />
<TwoColumn>
<TextColumn >
<IntlProvider locale="en">
<ContentUploader
language='en-US'
token={token}
rootFolderId={folderID}
/>
</IntlProvider>
</TextColumn>
<ImageColumn>
<Image src={imageSrc} />
</ImageColumn>
</TwoColumn>
</AnimationRevealPage>
);
};Finally, in the app.js file, uncomment the import statement for the uploader file we just created and the private route object for the new header selection. Save the page.
Test Locally
At this point, we should be able to run the portal code and see our changes locally.
In the terminal, run the following code snippet. Then, visit http://localhost:3000. Login using a dummy email and developer token grabbed from the developer console. As a reminder, those tokens are only valid for 60 minutes — so if you’ve left and come back, you might need to make a new one.
vercel devYou should see the new tab at the top for uploading loan documentation at the top.
If you click into the new tab, you should see the Content Uploader UI Element. Upload a file — it doesn’t matter what kind.
Back in Box, find the folder you had set up for the upload. You should see the file you uploaded.
Deploy Changes
Now that it is working locally — lets deploy the new functionality to the live site on Vercel. Vercel makes the deployment so easy — all you have to do is check in the changes to GitHub.
I’m going to use the VS Code built in GitHub integration, but you are welcome to use whatever git preferences you have.
Once the changes have been checked in, a deployment will automatically begin.
After the deployment is complete, you should be able to test the same functionality we did locally, live on the internet!
Closing Thoughts
As you’ve just seen in part 2, extending the portal with a new page is relatively easy. You can use the example code I’ve given as a guide to add new tabs to the default portal with any of the Box UI Elements.
In the next part, we will focus on authentication!
Until then — happy coding!
As always, if you have any feedback for the Box Developer Relations team, feel free to drop us a line on the developer forum.
