# Vite Template

{% hint style="info" %}
Even if you aren't going to build a React App, we still suggest scaffolding an application with the Vite template as an example of how to get the best out of Reapit Elements.
{% endhint %}

The fastest way to get started building a Reapit AppMarket App is with our [Foundations Vite Template](https://github.com/reapit/foundations-react-vite-template). Out of the box you will have an app that:

* Is authenticated against our Platform API using Reapit Connect and Connect Session
* Has the Elements UI library installed and out the box, it ships a fully working end-to-end Reapit contact look up and edit app, demonstrating how to get started with the platform as well as suggested UI layouts and patterns
* Has a login, log out, private protected routes, primary and secondary navigation.
* Includes TypeScript Platform Type Definitions, and Unit Tests.
* Includes Github Actions pipelines for pull request validation and production deployment.
* Comes bundled with AWS CDK scripts to enable you to deploy to your own AWS environment with virtually zero configuration.
* For a quick start development environment, you can deploy to our [Infra as a Service (IaaS)](/app-development/iaas.md) - contact us for beta access.

{% hint style="info" %}
For a demo deployed to our Infra as a Service (IaaS), [visit here.](https://handsome-zipper.iaas.paas.reapit.cloud/) You can use your developer credentials to log in with Reapit Connect.
{% endhint %}

### Getting Started

First, if you don't have a Reapit Connect client id yet, will need to obtain one [here](https://developers.reapit.cloud/apps/new).

If you are creating a fresh client id or already have one but want to see the full functionality of the template, you will need to add the following scopes to your app `read contacts`, `write contacts`, `read negotiators` & `read offices` - you can always remove these scopes later if you don't need them.

Ensure also you have set `http://localhost:8080` as a redirect uri and `http://localhost:8080/login` as a logout uri in your app settings in the [developer portal](https://developers.reapit.cloud/apps).

The output app will create a simple CRUD contacts app to demonstrate the features of the platform.

#### Prerequisites

* Node.js 18+
* Yarn 1+

First, run;

```
npx degit reapit/foundations-react-vite-template <<Your App Name>>
```

Then;

```
git init
```

And;

```
yarn
```

Add your `CONNECT_CLIENT_ID` to the `.env.example` file at the root of the project and rename it to `.env`.

Finally

```
yarn start
```

Each package has the following commands that can be run using yarn:

* `yarn start` will start a dev server at localhost:8080 with typechecking and linting enabled
* `yarn build` will build an app for production
* `yarn test` will run the Jest tests in watch mode
* `yarn test:ci` will run the Jest tests without watch and with coverage for use in CI environments
* `yarn lint` will run eslint and prettier accross the project
* `yarn check` will use tsc to type check the project
* `yarn upgrade:deps` will load a CLI to that allows you to update dependencies to their latest versions

### CI/CD and Releases

#### Development & PRs

When raising a PR, the dedicated Github action workflow will run tests, linting, typechecking and build tasks against all packages that changed since `main`.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://foundations-documentation.reapit.cloud/app-development/vite-template.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.