Docs
Getting started
Installation
Installation
#Download template
The easiest way to get started with the exta app is to download a pre-made template.
Terminal
git clone https://github.com/do4ng/exta-template my-appAfter this prompt, go to the directory and type a command (like npm install) to install the dependencies.
#Manual installation
You can also install exta into an existing project.
Since exta is a vite-based framework, please install dependencies related to vite and react.
Terminal
npm i --save-dev exta vite @vitejs/plugin-react
npm i --save-dev react react-domAnd create vite.config.ts and configure the configuration file as follows:
Typescript
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { exta } from "exta";
export default defineConfig({
plugins: [react(), exta()],
});Then, add the following scripts to your package.json file:
JSON
{
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview"
}
}Last, create index.html and add required scripts and container.
HTML
<head>
<!-- ... -->
<script src="/.exta/client.js" type="module"></script>
</head>
<body>
<!-- ... -->
%body%
</body>#Setup Typescript
To make full use of the types provided by exta, create a .d.ts file like the following:
Typescript
// env.d.ts
import "exta/env.d.ts";#Rule of index.html
The index.html file must follow these rules:
- It must be located in the root directory.
- The exta client script must be registered inside the
<head>. - You must include
%body%inside the<body>to indicate to the server where to inject code.
INFO
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="/.exta/client.js" type="module"></script>
</head>
<body>%body%</body>
</html>