spact v0.1.18
Spact
This project is in early stage. Please expect breaking changes!
What is Spact
The modern way of web development (React, Redux, Webpack, etc) is amazing, except that it's pretty time-consuming to set everything up. That's why there are tons of boilerplate/starter-kit projects on Github that you can clone or learn from.
Spact aims to solve the same problem except that it's not a boilerplate project for you to clone. It's built as a package for your application to import and use just like any other npm packages. Now instead of cloning a whole bunch of weird files into your project and try to insert your application logic in there, you will have a clean project directory with only your application logic, and you call spact functions to do all the heavy-lifting for you.
Right now Spact provides the following features:
- One function call to setup an Express server that hosts a Single Page Application whose assets are webpack-ed.
- In development mode, uses Webpack Dev Middleware and Webpack Hot Middleware to enable hot module reloading.
- Uses Babel for ES6 and JSX syntaxes.
- Uses React Router to setup routing.
- Uses Redux to manage application states.
How to use Spact
Let's start from scratch!
mkdir myspa
cd myspa
npm init
npm install spact --saveThis creates a clean project folder and installs spact as a dependency.
In a typical Single Page Application, the server usually hosts a single html page along with its javascript and css assets. This html page acts as the client side application. The server often also hosts some api endpoints for the client side to fetch data from. The following code sets up a server like this.
// server.js
var spactServer = require('spact/server')
var express = require('express')
var app = express()
// here you may choose to setup some api endpoints, e.g.
// app.use('/api', someExpressRouter)
// this will setup webpack related magic. by default spact will look for
// src/index.htm as a template for the html page, and src/main.js as the
// webpack client side entry point. this sets up the server so that it routes
// all traffic to index.htm (except for the api endpoints, js/css assets, etc).
// also, spact checks process.env.NODE_ENV to determine the environment (
// "production" v.s. "development").
spactServer.setup(app)
// if you do not want the default behavior, use
// server.setup(app, options)
// to override default settings.
var port = process.env.PORT || 3000
app.listen(port, function () {
// server started.
})As we mentioned earlier, the default html template that Spact looks for is at src/index.htm. The application developer needs to create this file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>my spa</title>
</head>
<body>
<div id="root"></div>
</body>
</html>The default client side entry script that Spact looks for is at src/main.js. So let's also create the file there. The following code will setup redux store and some middlewares, react router along with the browser history, and renders the root component into the div whose id is "root".
// src/main.js
import React from 'react'
import spactClient from 'spact/client'
import { Route, Redirect } from 'react-router'
// this is the react component to render
const Home = (props) => <div>Hello World! Spact at your service.</div>
// this is react-router route configuration. everything is the same except
// that we need to provide a factory function instead of the route configuration
// itself. this is to pass the redux store into the routes.
const routes = (store) => {
return (
<Route path='/' component={Home}>
<Redirect from='*' to='/' />
</Route>
)
}
const reducers = {
// key1: reducer1,
// key2: reducer2
}
spactClient.setup(routes, reducers)See? Almost every line of code is your application's logic. No boilerplate here. Now we have a project directory like this:
/
package.json
server.js
/src
index.htm
main.jsHow you organize the rest of your application is totally up to you!
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago