NativeDocument Startup

A modern development environment and bundler setup for building web applications with the NativeDocument framework. This starter kit provides everything you need to get started with NativeDocument development, including Vite for fast bundling, internationalization support, and development tools.

Features

• NativeDocument Framework: Reactive JavaScript framework with zero dependencies
• Vite Integration: Lightning-fast development server and optimized builds
• Internationalization: Built-in i18n support with automatic key scanning
• ESLint: Code quality and consistency
• Modern JavaScript: ES6+ modules and modern web APIs

Quick Start

Prerequisites

• Node.js 16+
• npm or yarn

Installation

# Clone or download this starter
npx degit afrocodeur/native-document-vite my-app
cd my-app

# Install dependencies
npm install

# Start development server
npm start

Your app will be running at http://localhost:5173

Available Scripts

Script	Description
npm start	Start development server with hot reload
npm run build	Build for production
npm run preview	Preview production build locally
npm run lint	Run ESLint code analysis
npm run i18n:scan	Scan project for missing translation keys

Project Structure

native-document-startup/
├── dist/                         # Built files (generated by Vite)
├── public/                       # Static assets (images, icons, etc.)
├── src/                          # Source code
│   ├── layouts/                  # Layout components (header, footer, sidebar, admin...)
│   ├── pages/                    # Page components (home, about, contact)
│   ├── components/               # Reusable UI components (buttons, forms, modals)
│   ├── core/                     # Core application logic
│   │   ├── middlewares/          # Route middlewares (auth, logging, validation)
│   │   ├── services/             # Business logic and API services
│   │   └── utils/                # Helper functions and utilities
│   ├── lang/                     # Internationalization
│   │   ├── locales/              # Translation files
│   │   │   ├── en.json           # English translations
│   │   │   └── fr.json           # French translations
│   │   └── resources.js          # i18n resources loader and configuration
│   ├── main.js                   # Application entry point and initialization
│   ├── routes.js                 # Route definitions and configuration
│   └── index.css                 # Global styles and CSS variables
├── i18n.scanner.config.json      # i18n scanner configuration
├── vite.config.js                # Vite bundler configuration
└── package.json                  # Project dependencies and scripts

Internationalization Setup

1. Configure the Scanner

Create i18n.scanner.config.json:

{
  "scan": {
    "dir": "src",
    "extensions": ["js"]
  },
  "locales": "src/locales",
  "save": "reports"
}

2. Create Translation Files

src/locales/en.json:

{
  "welcome.title": "Welcome to NativeDocument",
  "welcome.message": "Build reactive web applications with zero dependencies"
}

src/locales/fr.json:

{
  "welcome.title": "Bienvenue dans NativeDocument",
  "welcome.message": "Créez des applications web réactives sans dépendances"
}

3. Scan for Missing Keys

npm run i18n:scan

This will analyze your code and report any missing translation keys.

Development Workflow

1. Start Development: npm start
2. Write Components: Create reactive components using NativeDocument
3. Add Translations: Use tr() for translatable strings
4. Scan i18n: Run npm run i18n:scan to find missing keys
5. Test: Check your app in the browser
6. Build: Run npm run build for production
7. Preview: Use npm run preview to test the production build

Advanced Features

Routing

// Add routing to your app
const { Router } = NativeDocument.router;

const router = Router.create({ mode: "history" }, (router) => {
  router.add("/", HomePage);
  router.add("/about", AboutPage);
  router.add("/contact", ContactPage);
}).mount(document.body);

Global State Management

// Using NativeDocument Store
const { Store } = NativeDocument;

Store.create("app", {
  theme: "light",
  user: null,
  isLoading: false
});

// Use in components
const Header = () => {
  const app = Store.use("app");
  
  return Div([
    H1("My App"),
    P(['Current theme: ', app.check(state => state.theme)])
  ]);
};

Production Build

# Build for production
npm run build

# The built files will be in the dist/ directory
# Deploy the contents of dist/ to your web server

Customization

Adding Dependencies

# Add new dependencies
npm install package-name

# Add development dependencies
npm install -D package-name

Modifying Vite Config

Edit vite.config.js to customize the build process, add plugins, or configure development server options.

ESLint Configuration

Modify .eslintrc.js to customize code style rules:

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ['eslint:recommended'],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  rules: {
    // Your custom rules
  },
};

Troubleshooting

Common Issues

Development server not starting

• Check that port 5173 is available
• Ensure all dependencies are installed: npm install

i18n scanner not working

• Verify i18n.scanner.config.json exists
• Check that locale files exist in the specified directory

Build errors

• Run npm run lint to check for code issues
• Ensure all imports are correct

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run tests and linting
5. Submit a pull request

License

MIT

Resources

• NativeDocument Framework
• Vite Documentation
• NativeDocument i18n Package