backendx v1.0.1

backendx

BackendX allowes to use JSX syntax (just like React) on your server side applications. Components render on server size and BackendX uses real DOM instead of React's virtual DOM. As well as other frameworks BackendX supports middleware functions

TODO

• Render components
• Use middlewares
• Pass context to nested components
• Auto-inject CSS
• Frontend integration

Install

yarn add backendx

or using NPM

npm install backendx

Example app

/**
 * Define pragma to use Backendx.createElement instead of React.createElement
 * @jsx Backendx.createElement
 * @jsxFrag Backendx.Fragment
 */

const Backendx = require('backendx')

// Simple nested component
const Nested = ({ title }) => <h2 className="nested">{title}</h2>

// Define root component
const Root = ({ context }) => {
	// Context is always passed to component

	return (
		<Backendx.Fragment>
			<h1>{context.test}</h1>

			<Nested title="Hello!" />
		</Backendx.Fragment>
	)
}

// Use built-in server
const server = new Backendx.Server(Root)

// You can apply middleware as well
server.connect((ctx, next) => {
	ctx.test = 'Simple middleware'
	return next()
})

// Listen on port 8080
server.listen(8080).then(() => console.log('Server started!'))

Using with webpack (recommended)

Install webpack and babel loader for it

yarn add webpack webpack-cli                            # Webpack
yarn add @babel/core @babel/preset-react babel-loader   # Babel

webpack.config.js

const path = require('path')

module.exports = {
	target: 'node',
	entry: './src/index.js',
	output: {
		path: path.resolve(__dirname, 'build'),
		filename: 'bundle.js'
	},
	module: {
		rules: [
			{
				test: /\.m?js$/,
				exclude: /(node_modules|bower_components)/,
				use: {
					loader: 'babel-loader',
					options: {
						presets: ['@babel/preset-react']
					}
				}
			}
		]
	}
}

NPM scripts

{
	"scripts": {
		"build": "webpack --mode production",
		"dev": "webpack --mode development --watch"
	}
}

Build for production

yarn build

Run in development mode

yarn dev

Using with @babel/node

Install babel and nodemon (only for development)

yarn add @babel/core @babel/node @babel/preset-react -D
yarn add nodemon -D    # Only if you want to use live reload

.babelrc

{
	"presets": ["@babel/preset-react"]
}

NPM scripts

Note: your code must be in src/index.js file

{
	"scripts": {
		"start": "babel-node src/index.js",
		"dev": "nodemon --exec babel-node src/index.js"
	}
}

Run!

yarn start

Or run using nodemon

yarn dev

License

This project is licensed under MIT license. See LICENSE