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 = {

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.when('mynode.count', (c)=>{

    render() {
        return (
                The count is
                ' loading...'
                :<strong> {this.state.count}</strong>}!

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) {
            test: /\.(html)$/,
            use: {
                loader: 'html-loader',
                options: {
                    attrs: [':data-src']
        return config

Next create the html template in ./contents/about.html

        About NW
    <p>Welcome to About!</p>

Create ./pages/about.js to load the template

import Layout from 'nodewire'
import template from '../contents/about.html'

export default () => <Layout layout={template}/>