preact-vite-app

v1.0.0

Published

a month ago

A Preact app built with Vite

Downloads

0High
0Medium
0Low

jameswilliamquinn2018

To build a Vite-based Preact app as an npm package, you need to set up a project structure that includes the Vite configuration files, Preact placeholder code, and other necessary files. Below is the complete file structure, configuration, and placeholder code required to get you started.

1. Project Structure

Here's the basic structure of your Preact Vite project:

preact-vite-app/
├── public/
│   └── index.html
├── src/
│   ├── components/
│   │   └── App.jsx
│   ├── main.jsx
│   └── index.css
├── .gitignore
├── index.js
├── package.json
├── vite.config.js
└── README.md

2. Package Configuration

`package.json`

{
  "name": "preact-vite-app",
  "version": "1.0.0",
  "description": "A Preact app built with Vite",
  "main": "index.js",
  "module": "dist/index.js",
  "files": [
    "dist"
  ],
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "preact": "^10.0.0"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^3.0.0",
    "vite": "^4.0.0"
  }
}

3. Vite Configuration

`vite.config.js`

import { defineConfig } from 'vite';
import preact from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [preact()],
  build: {
    lib: {
      entry: 'src/main.jsx',
      name: 'PreactViteApp',
      fileName: (format) => `preact-vite-app.${format}.js`,
    },
    rollupOptions: {
      external: ['preact'],
      output: {
        globals: {
          preact: 'Preact',
        },
      },
    },
  },
});

4. Source Code

`public/index.html`

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Preact Vite App</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.jsx"></script>
</body>
</html>

`src/main.jsx`

import { render } from 'preact';
import App from './components/App';
import './index.css';

render(<App />, document.getElementById('app'));

`src/components/App.jsx`

import { h } from 'preact';

function App() {
  return (
    <div>
      <h1>Hello, Preact + Vite!</h1>
    </div>
  );
}

export default App;

`src/index.css`

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f0f0f0;
  color: #333;
}

h1 {
  text-align: center;
  margin-top: 20%;
}

5. Entrypoint for the NPM Package

`index.js`

import App from './src/components/App';

export default App;

6. Git Ignore File

`.gitignore`

node_modules/
dist/
.vite/

7. README File

`README.md`

# Preact Vite App

This is a simple Preact app built with Vite, intended to be used as an npm package.

## Development

To start the development server:

```bash
npm run dev

Build

To build the project:

npm run build

Preview

To preview the built project:

npm run preview

Usage

After building, you can import the package in your project:

import PreactViteApp from 'preact-vite-app';


### 8. **Running the Project**

To run the project locally:

1. **Install Dependencies**:
   ```bash
   npm install

Run Development Server:
```
npm run dev
```
Build the Project:
```
npm run build
```

This will create a dist/ directory with your library that can be published to npm.

9. Publishing to NPM

To publish your package:

Build the package:
```
npm run build
```
Log in to npm:
```
npm login
```
Publish the package:
```
npm publish
```

This setup will give you a basic Vite + Preact app that can be easily developed and published as an npm package.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

1. Project Structure

2. Package Configuration

package.json

3. Vite Configuration

vite.config.js