moleculer-NextJs

Description

It's time to have SSR on Moleculer!

Installation

Step 0 : your www folder

At the root of your project, create a www folder. Inside of this folder, you will create new folders for your NextJs websites!

Step 1 : Command line

moleculer-nextjs depends on next, so you have to install it too!

Note: install the same version of the addon. I'll update the next line for every updates!

$ npm install next@6.0.4-canary.8 moleculer-nextjs --save

Step 2 : Package

Inside of your package.json, you should add this line inside of the scripts object.

"build-nextjs": "node ./node_modules/moleculer-nextjs/src/nextjs-builder --web ./www",

Then, edit your start script by adding npm run build-nextjs && before firing the command that start your server.

Step 3 : Babel!

Make sure to have a .babelrc.js file at the root of your NextJs project folder.

Here a sample one:

//	.babelrc.js
const babel = {
	presets: [
		'next/babel'
	]
}
module.exports =  babel;

You can edit your own settings later :)

Step 4 : environment

Make sure to have a env-config.js file at the root of your NextJs project folder.

Like this :

//	env-config.js
const prod = process.env.NODE_ENV === 'production'

module.exports = {
	'process.env.NODE_ENV': process.env.NODE_ENV,
}

Note

I've not finished it yet but it worked. See the usage, i'll make a small documentation in few days!

Example

If you want to see an example, I made a socket-io + nextjs + moleculer repo here :

https://github.com/davidroman0O/moleculer-nextjs-socketio-example

Usage

This addons will assume that you give paths based on the root of your project. The common folder is a sharabled components folder that will be copied inside of your project. This way, to can have a folder that can share a lot of components to every single projects you want.

const NextJS = require("moleculer-nextjs");

module.exports = {
	name: "www-fo",

	mixins: [ NextJS ],

	settings: {
		name: "FrontOffice",
		dev: process.env.NODE_ENV !== 'production',
		port: 4000,
		conf: {
				webpack: (config, { buildId, dev, isServer, defaultLoaders }) => {
					return config;
				},
		},
		dir: "www/fo",
		//	It's a common folder inside of your www folder that's contain every React components you want to share between every services that refer it
		common_folder: "www/common"
	},

	//	Better route declaration !
	routes: {
		"/blog/:slug": function(req, res) {
			const actualPage = '/blog';
			const queryParams = { slug: req.params.slug }
			this.app.render(req, res, actualPage, queryParams);
		},
		"/notFound": function(req, res) {
			res.send('Hello World!');
		}
	},

	methods: {
		onPrepare(server, app) {
			console.log("Here I can redirect to new url like the example in the documentation");
			server.get('/p/:id', (req, res) => {
				const actualPage = '/post'
				const queryParams = { id: req.params.id }
				app.render(req, res, actualPage, queryParams)
			});
		}
	},

}