Remix is a full-stack web framework based on React that leverages distributed systems for deployment. What makes Remix special is how it loads data from the server and pre-renders your web pages.
This can be a bit strange when coming from a client-only framework like React. We’ll use the server to generate tokens from our secret credentials and use them in the Agora Web UIKit, a client-side library
- An Agora developer account (It’s free, sign up here!)
- Node.js LTS
- A high-level understanding of React
Create a new Remix project
You can find the finished project on GitHub. To follow along here, create your own Remix project. Open a terminal and execute
npx create-remix@latest demo. Select the following options to get a basic app template with TypeScript:
Enter the project directory by typing
cd demo. Install the Agora Web UIKit and token library by executing:
npm i agora-react-uikit agora-access-token
Note:At the time of writing, the current
agora-react-uikit release is
Setting up the Agora credentials
- Once you have an Agora account, click the Project Management tab in the console.
- Click the Create button.
- Enter a name for your project.
- Select Secured Mode while creating the project.
- Rename the .env.example file to .env.
- Copy your App ID and the App Certificate from the Agora project page like so:
That’s the setup. You can now execute
npm run dev to start the Remix server on
The template structure looks like this:
├── app │ ├── entry.client.tsx │ ├── entry.server.tsx │ ├── root.tsx │ └── routes │ └── index.tsx ├── package.json ├── public │ ...
A powerful feature of Remix is nested routes. We’ll create a dynamic route for video calls. You’ll have
example.com/channel/<channelName>, where users entering the same
<channelName> can communicate with each other. The route generates and hosts the token from our Agora credentials. You can limit access to the
/channel route for authenticated users — adding a layer of security.
By using Remix with the Agora Web UIKit, you can go to production in minutes!
Creating the Dynamic Route
To host dynamic video calls on
example.com/channel/<yourChannelName>, we’ll create a new file for that route
To generate props for the video call component, we’ll create a
loader function that generates the RTC and RTM token using the App ID and Certificate from our
.env file. We get the route
channel name from the
params prop. We create a JSON string from this
data object to return from the
Now, let’s create a React component for the channel route. We’ll use a state variable called
mounted that is set to true inside a
useEffect hook. This lets us render the
Videocall component only when the file is being rendered inside a browser. We can get the
jsonData using the
userLoaderData hook from Remix. We will extract the values from our object and pass them to a component called
Videocall. Finally, we’ll return some JSX to render a
<Videocall> component that we’ll create next.
The Video Call component
Create a new file
/app/components/videocall.client.tsx to create the video call using the Agora Web UIKit:
We’ll access the data props that we passed to this component and pass them to the
<AgoraUIKit> component. This component takes care of all the logic for your video call. No other code is needed. You can read more about how you can customize the design and functionality (for example, you can use it for live-streaming) in this blog post.
localhost:3000/channel/test to view your video call UI. You can open this address in a separate tab to simulate a video call and test things out.
If you have questions while using this project or the Agora Web UIKit, I invite you to join the Agora Developer Slack community, where you can ask them in the
Feel free to open pull requests for feature requests or create issues to report bugs on GitHub for this Remix demo or for the UIKit. We look forward to your contributions. We also have similar UIKits for Android, iOS, React Native, and Flutter, so be sure to check those out as well.