> ## Documentation Index
> Fetch the complete documentation index at: https://docs.t3planet.de/en/latest/llms.txt
> Use this file to discover all available pages before exploring further.

# Introduction

First of all, Thank you so much for purchasing this template and for being our loyal customer.

This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how to use it properly.

When you face a problem please let us know. And always visit the official website of React, Next, React Bootstrap, etc.

<Note>
  Prerequisites > React & Next is built on top of Node.js. To get up and running with Next, you’ll need to have a recent version of Node and Yarn installed on your computer.
</Note>

**Step 1.** Get Frontend Reactjs/Nextjs app-code from /typo3conf/ext/ns\_theme\_t3reva/frontend\_t3reva.zip/ You should able to see the following structure once unzip.

<img src="https://mintlify.s3.us-west-1.amazonaws.com/t3planet/en/latest/EXTReva/InstallationT3RevaReactjs/images/root-folder-structure3.webp" alt="root-folder-structure" />

**Step 2.** Connection with Your Backend/API
At the same place please create “.env” file to connecting your backend CMS or we can say API’s. and then write the following two lines.

```python theme={"theme":{"light":"github-light","dark":"github-dark"}}
NEXT_PUBLIC_API_URL=https://your_backend_url/
NEXT_PUBLIC_TYPO3_MEDIA=fileadmin
```

**Step 3.** Install Dependencies
We require many packages (dependencies) to run our site. So, We are at “root” directory and run the command below.

```python theme={"theme":{"light":"github-light","dark":"github-dark"}}
"yarn"
```

<img src="https://mintcdn.com/t3planet/Qa6KCwsEObrrxjgE/en/latest/EXTReva/InstallationT3RevaReactjs/images/install3.png?fit=max&auto=format&n=Qa6KCwsEObrrxjgE&q=85&s=7d0301895b3413c74da5a42c6e3e82d3" alt="install" width="979" height="508" data-path="en/latest/EXTReva/InstallationT3RevaReactjs/images/install3.png" />

**Step 4.** How To Run > To start our development server run command below.

```python theme={"theme":{"light":"github-light","dark":"github-dark"}}
"yarn dev"
```

Now, Open your browser and visit [http://localhost:3000](http://localhost:3000) You should see a page like below.

<img src="https://mintcdn.com/t3planet/Qa6KCwsEObrrxjgE/en/latest/EXTReva/InstallationT3RevaReactjs/images/landing_screen3.webp?fit=max&auto=format&n=Qa6KCwsEObrrxjgE&q=85&s=da63607209a336fe3ed264859d51d97e" alt="landing_screen" width="1904" height="746" data-path="en/latest/EXTReva/InstallationT3RevaReactjs/images/landing_screen3.webp" />

Wow! You are a genius. Now open the code editor and start hacking!

**Step 5.** CLI Commands
Some useful commands to work with the project.

1. “yarn dev” - Start development server at localhost:3000/
2. “yarn build” - Generate production NextJS buil
3. “yarn start” Serve to build files at localhost:3000/

**Step 6.** Deployment process > There are several deployment processes. You can select as per your comfort. Although,

**Step 6.1** Traditional way for deployment using upload the “/out” folder to the server.

**Step 6.2** Automatic deployment process using the third party tool.
One of them is [https://vercel.com/](https://vercel.com/)

* Connect vercel with our your gitlab, github, etc.
* When perform commit on the master branch vercel will automatically deploy and serve output on the defined domain.

<img src="https://mintlify.s3.us-west-1.amazonaws.com/t3planet/en/latest/EXTReva/InstallationT3RevaReactjs/images/vercel_login3.webp" alt="vercel_login" />

Awesome! Now Your Site Is Ready To Publish.!