Create & Deploy a Lottie Animation React App using Vercel
Tags: react, vercel, zeit, lottie
Published: 2020-05-05 14:00:12

## 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.

![EN](https://embeddednature.com/wp-content/uploads/2020/05/EmbeddedNature-Vercel-Template.png)


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

![Import](https://embeddednature.com/wp-content/uploads/2020/05/Import-Git-Repository-EmbeddedNature.png)

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.

![Domains](https://embeddednature.com/wp-content/uploads/2020/05/EmbeddedNature-Production-Deploy.png)

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`.

```javascript
 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:
```javascript
<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:

```javascript
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.

![terminal](https://embeddednature.com/wp-content/uploads/2020/05/Embedded-Nature-Terminal-Vercel-Zeit.png)

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.

![Build](https://embeddednature.com/wp-content/uploads/2020/05/EmbeddedNature-npm-build-log.png)

## 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](https://twitter.com/EmbeddedNature) | [Instagram](https://www.instagram.com/embeddednature/)