Quick Start Guide
Prerequisites
Basic Knowledge
Familiarity with HTML, CSS, and JavaScript
Development Environment
Any text editor and modern web browser
Web Server
Local web server (Apache, Nginx, or similar)
Step 1 Create Project Structure
First, let's create a basic project structure
my-app/
├── index.html
├── css/
│ └── styles.css
├── framework/
│ ├── css/
│ ├── js/
│ └── Now.js
├── js/
│ └── app.js
├── components/
│ └── counter.js
Step 2 Setup HTML
Create index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My First Now.js App</title>
<link rel="stylesheet" href="/framework/css/base.css">
<link rel="stylesheet" href="/framework/css/components.css">
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<div id="app">
<header>
<h1>My First Now.js App</h1>
</header>
<main>
<!-- Counter component will be mounted here -->
<div data-component="counter"></div>
</main>
</div>
<script src="/framework/Now.js"></script>
<script src="/js/app.js"></script>
</body>
</html>
Step 3 Create Your First Component
Create components/counter.js
// Counter component
Now.getManager('component').define('counter', {
// Component template
template: `
<div class="counter">
<h2>{{title}}</h2>
<div class="counter-controls">
<button class="button blue large" data-click="decrement">-</button>
<span class="counter-value">{{count}}</span>
<button class="button blue large" data-click="increment">+</button>
</div>
<p class="counter-text">Current count: {{count}}</p>
</div>
`,
// Component state
state: {
title: 'Counter Component',
count: 0
},
// Component methods
methods: {
increment() {
this.state.count++;
this.render();
},
decrement() {
this.state.count--;
this.render();
}
},
// Lifecycle hooks
mounted() {
console.log('Counter component mounted');
},
// Event handlers
events: {
'counter:reset': function() {
this.state.count = 0;
this.render();
}
}
});
Step 4 Initialize Your App
Create js/app.js
document.addEventListener('DOMContentLoaded', async () => {
try {
// Initialize framework
await Now.init({
debug: true,
environment: 'development',
resources: {
components: ['counter']
}
});
// Create application instance
const app = await Now.createApp({
name: 'My First Now.js App',
version: '1.0.0'
});
// Optional: Add some custom event handling
const eventManager = Now.getManager('event');
if (eventManager) {
eventManager.on('counter:changed', (data) => {
console.log('Counter changed:', data);
});
}
} catch (error) {
console.error('Failed to initialize app:', error);
}
});
Step 5 Add Some Style
Create css/styles.css
/* App styles */
#app {
max-width: 800px;
margin: 0 auto;
padding: 2rem;
}
/* Counter component styles */
.counter {
text-align: center;
padding: 2rem;
background: var(--surface-color);
border-radius: 8px;
box-shadow: var(--shadow-sm);
}
.counter-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin: 1rem 0;
}
.counter-value {
font-size: 2rem;
font-weight: bold;
min-width: 4rem;
}
.counter-text {
color: var(--text-secondary);
margin-top: 1rem;
}
Step 6 Run Your App
Start a local web server in your project directory. Here are some options
# Python 3
python -m http.server 8000
# Python 2
python -m SimpleHTTPServer 8000
# Using npx
npx serve
# Or install http-server globally
npm install -g http-server
http-server
php -S localhost:8000
Then open http://localhost:8000 in your browser.