Lido Frontend Template

Lido Frontend Template is a project template for developing Lido applications. It features the standard Lido frontend stack including Next.js, SWR, ethers, Lido UI and styled-components. The purpose of this template is to standardize Lido frontends and to enable developers to start working on the application as soon as possible with minimal setup required.

Pre-requisites

Node.js v12+
Yarn package manager

Development

Step 0. Read DOCS.md in the root of the project

Step 1. Copy the contents of .env to .env.local

cp .env .env.local

Step 2. Fill out the .env.local. You may need to sign up for Infura or Alchemy, if you haven't already, to be able to use Ethereum JSON RPC connection.

Step 3. Install dependencies

yarn install

Step 4. Start the development server

yarn dev

Step 5. Open http://localhost:3000 with your browser to see the result.

Environment variables

This project uses publicRuntimeConfig in the next.config.js and getServerSideProps on the pages (function may be empty, but it forces Next.js to switch to Server-Side Rendering mode). This is necessary to quickly start the docker container without rebuilding the application. More on that in DOCS.md.

Content-Security-Policy

In order to improve security, this template includes a Content-Security-Policy boilerplate. Please make sure to customize the policies in utils/withCsp.ts before shipping the application to production. Learn more about it in DOCS.

Production