Create & Deploy a Lottie Animation React App using Vercel

Overview

With Vercel (Zeit), you can swiftly deploy your static websites in minutes, no configuration required. Simply choose your template, push to Git and your website is live! In this guide we will walk through the process for deploying a react app using Vercel. Our React application will use AirBnb’s Lottie Animations to showcase how easy it is to add animated content to your apps.

Assumptions

You have a basic understanding of React and Git.

Setup

To get started with Vercel you will need to create an account on their website by linking Vercel to your GitHub, GitLab, or BitBucket account.

Once logged in, you can import a project from your repository or use one of Vercel’s optimized framework templates.

We will be using the Create React App Template. Once you’ve chosen your template, you will need to set a project name.

Vercel will automatically create a Git repository for you, so you can update your project easily. Once deployed Vercel will spin up your new application, you will be able to visit your website once the build is finished.

Notice, Vercel provided us with a development, staging, and production domain.

With your website up and running, it’s now time to pull down your repository so we can create some Lottie animations.

git clone the repository Vercel created for us. Inside your local project directory lets install our Lottie animation view for react. npm i react-lottie

Lottie Animations

Lottie animations is a library built by Airbnb to easily add high-quality animations to any native app. The library renders Adobe After Effect animations in real time, so using animations is as easy as static images.

react-lottie will help us abstract some of the calls Lottie-web requires.

In your app.js we can import react-lottie then choose an animation that we want loaded into our application.

react-lottie uses a defaultOptions object that we pass into our Lottie options prop. This will set the animation data and the additional parameters such as looping and autoplay.

 const defaultOptions = {
    loop: true,
    autoplay: true,
    path: props.url,
    rendererSettings: {
        preserveAspectRatio: 'xMidYMid slice',
    },
};

The defaultOptions can either load an animation from a domain using the path: variable or you can import a .json animation file from your project using animationData:.

Displaying a Lottie animation is simple:

<Lottie options={defaultOptions} height={state.height} width={state.width} />

The best place to find Lottie Animations is on the LottieFiles website. They have 100s of animations to choose from, with a free account you can download animations or simply reference them in your projects using the URL. https://lottiefiles.com/

Here is an example Lottie Component using react hooks:

import React, { useState, useEffect } from 'react';
import Lottie from 'react-lottie';

const LottieComponent = (props) => {
    const initState = { url: '', heigth: 100, width: 100 };
    const [state, setLottieSate] = useState(initState);

    const defaultOptions = {
        loop: true,
        autoplay: true,
        path: props.url,
        rendererSettings: {
            preserveAspectRatio: 'xMidYMid slice',
        },
    };

    useEffect(() => {
        setLottieSate({
            url: props.url,
            name: props.name,
            height: props.height,
            width: props.width,
        });
    }, [props.url]);
    return (
        <div className={'lottie-container'}>
            <h3>{state.name}</h3>
            <Lottie options={defaultOptions} height={state.height} width={state.width} />
        </div>
    );
};

export default LottieComponent;

Deploying your App

You can deploy your application using a simple command, now.

Now is Vercel’s command-line interface (CLI) which enables instant cloud deployment.

To install now: npm i -g now.

Once installed, in your terminal run the command now. This will queue up your build to the server.

If we head over to the Vercel dashboard we can see our build Logs. Once complete we can visit the site to see our changes.

Deploy to Production

With Vercel it is easy to push your build out to production. Simply merge your current branch into the master branch, this will trigger a release build in the Vercel Pipeline.

Wrap Up 🎉

Just like that we were able to spin up a create react app, and showcase the power of Lottie animations in your iOS, Web, and Android apps. Vercel makes it easy to create proof of concepts on the fly, not only that, it enables developers to build an app, capture feedback in lower environments, then push the build out to production.

Vercel has many templates to choose from and includes many other features, I encourage you to check them out.

I hope you found this guide helpful, how will you use Vercel to speedup your development process?
References

Lottie Documents: https://airbnb.io/lottie/#/web
My Repository: https://github.com/ICeZer0/create-react-app
YouTube Video example: https://youtu.be/3K0sfRJgAjI

Twitter | Instagram