Installation
Installation Methods
There are several ways to add Now.js to your project. Choose the method that best suits your needs
Basic Setup
Create your first Now.js application by adding this code to your HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Now.js App</title>
<!-- Add Now.js CSS -->
<link rel="stylesheet" href="/css/base.css">
<link rel="stylesheet" href="/css/components.css">
</head>
<body>
<div id="app">
<!-- Your app content -->
</div>
<!-- Add Now.js -->
<script src="/js/Now.js"></script>
<!-- Initialize your app -->
<script>
document.addEventListener('DOMContentLoaded', async () => {
// Initialize framework
await Now.init({
debug: true,
environment: 'development'
});
// Create application instance
const app = await Now.createApp({
name: 'My App',
version: '1.0.0'
});
});
</script>
</body>
</html>
Server Setup
Apache Configuration
Add this to your .htaccess file
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
Nginx Configuration
location / {
try_files $uri $uri/ /index.html;
}
Node.js Setup
const express = require('express');
const app = express();
const path = require('path');
// Serve static files
app.use(express.static('public'));
// Handle SPA routing
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'public', 'index.html'));
});
app.listen(3000, () => {
console.log('Server running on port 3000');
});
PHP Setup
<?php
// index.php
require_once 'vendor/autoload.php';
$request = $_SERVER['REQUEST_URI'];
// Serve the SPA for all non-file requests
if (!preg_match('/\.(css|js|jpg|png|gif)$/', $request)) {
include 'public/index.html';
exit;
}
Configuration
Here's a complete configuration example with all available options
await Now.init({
// Debug mode
debug: true,
// Environment: 'development' or 'production'
environment: 'development',
// Components to load
resources: {
components: [
'components/header.js',
'components/footer.js'
]
},
// i18n configuration
i18n: {
defaultLocale: 'en',
availableLocales: ['en', 'th']
},
// Router configuration
router: {
mode: 'history',
base: '/',
routes: {
'/': { template: 'home.html' },
'/about': { template: 'about.html' }
}
},
// Theme configuration
theme: {
default: 'light',
storage: 'local'
}
});