11. Universal Web Applicatons with NodeWire & nextjs¶

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

12. Using HTML Templates¶

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}/>