To start, create a sample project by running the following commands:
mkdir hello-nodewire
cd hello-nodewire
npm init -y
npm install --save react react-dom next nodewire
mkdir pages
Then open the “package.json” in the hello-nodewire directory and add the following NPM script.
{
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
}
next, create a file named conf.js and add the following content:
export let conf = {
username:"micro@microscale.net",
password:"aB01@",
instance:"0j18xk0rjqrb",
server:"dashboard.nodewire.org",
};
Now let’s create our first page. Create a file named pages/index.js and add the following content:
import {nw} from 'nodewire';
import {conf} from '../conf.js';
class Index extends React.Component {
state = {}
async componentDidMount()
{
nw.connect(conf);
nw.when('mynode.count', (c)=>{
this.setState({count:c});
});
}
render() {
return (
<div>
The count is
{(this.state.count===undefined)?
' loading...'
:<strong> {this.state.count}</strong>}!
</div>
)
}
}
export default Index
Now everything is ready. Run the following command to start the dev server:
npm run dev
Install and configure html loader
npm install html-loader
npm install --save @zeit/next-css
Create ‘next.config.js’ and paste the following code
const webpack = require('webpack')
const withCSS = require('@zeit/next-css')
module.exports = withCSS({
webpack(config, options) {
config.module.rules.push({
test: /\.(html)$/,
use: {
loader: 'html-loader',
options: {
attrs: [':data-src']
}
}
});
return config
}
})
Next create the html template in ./contents/about.html
<div>
<h1>
About NW
</h1>
<p>Welcome to About!</p>
</div>
Create ./pages/about.js to load the template
import Layout from 'nodewire'
import template from '../contents/about.html'
export default () => <Layout layout={template}/>