Preface

After building a resume generator , I like that feeling build a project that everything's ready for some people to deploy. And then that time I discovered a website could free deploy app with given API manager data, so again I try to build a blog purpose of deploying in minutes for everyone want an own website.

However when I finish my work and after deploying the CMS website sent me an mail to tell me I need to upgrade the CMS account in 14days otherwise they will remove my app. My god, I suddenly more disappointed than any moment I meet difficult problems when I build my app, that faked advertisement destroyed my idea. oh..it just destroyed my recent finished works.

So it seems I built the app but for myself . However, I can share my experiences about I building my project. I believe that also have its valuable .

Main

there is a Chinese saying "A workman must first sharpen his tools if he is to do his work well" , this is the first part of my project: create a building scaffolding .

Before I really show my experience I recommend you to this to read the file architecture of this part.

I think I 'm not necessary to say any more about Nodejs and 'Express' or Webpack right ? After install Webpack globally we can start to write a Webpack.config file. we need ES6 and React .

"devDependencies": {
    "babel-cli": "^6.10.1",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-es2016": "^6.11.0",
    "babel-preset-react": "^6.11.1",
    "eslint": "^3.0.1",
    "eslint-config-airbnb": "^9.0.1",
    "eslint-plugin-import": "^1.9.2",
    "eslint-plugin-jsx-a11y": "^1.5.3",
    "eslint-plugin-react": "^5.2.2",
    "nodemon": "^1.9.2",
    "react-hot-loader": "^1.3.0",
    "webpack-dev-server": "^1.14.1",
    "webpack-hot-middleware": "^2.12.1"
  },
  "dependencies": {
    "babel-core": "^6.10.4",
    "babel-loader": "^6.2.4",
    "babel-polyfill": "^6.9.1",
    "cosmicjs": "^2.1.2",
    "events": "^1.1.1",
    "express": "^4.14.0",
    "history": "^3.0.0",
    "hogan-express": "^0.5.2",
    "immutable": "^3.8.1",
    "react": "^15.2.0",
    "react-dom": "^15.2.1",
    "react-redux": "^4.4.5",
    "react-router": "^2.5.2",
    "react-router-redux": "^4.0.5",
    "react-router-scroll": "^0.2.0",
    "redux": "^3.5.2",
    "redux-immutable": "^3.0.6",
    "redux-saga": "^0.11.0",
    "sanitize.css": "^4.1.0",
    "webpack": "^1.13.1"
  } 

The list above is all needs in this part.

At first, we write the server .

import express from 'express';
import path from 'path';

import webpack from 'webpack';
import webpackMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';
import webpackConfig from '../webpack.config.dev';
const app = express();

const compiler = webpack(webpackConfig);
app.use(webpackMiddleware(compiler, {
  hot: true,
  publicPath: webpackConfig.output.publicPath,
  noInfo: true,
}));
app.use(webpackHotMiddleware(compiler));

app.get('/*', (req, res) => {
  res.sendFile(path.join(__dirname, './index.html'));
});

app.listen(3333, () => console.log('Running on localhost 3333'));

The server is for compile React and ES6 imminently . the Express can work to maintain the states and compile fast without restarting the server. after wrote it down we can't make it work because we use ES6.

To solve this problem we can use babel-node instead of node to start Server.

"scripts": {

  "server": " babel-node server "

},

after Writing the scripts line to package.json we can npm run server to start the server use ES6 . However ,the webpack haven't done . We need to write webpack.config.dev.js like follows .

import path from 'path';
import webpack from 'webpack';

export default {
  devtools: 'eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    path.join(__dirname, '/client/index.js'),
  ],
  output: {
    path: '/',
    publicPath: '/',
  },
  plugins: [
    new webpack.NoErrorsPlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        include: path.join(__dirname, 'client'),
        loaders: ['react-hot', 'babel'],
      },
    ],
  },
  resolve: {
    extentions: ['', 'js', 'jsx'],
  },
};

This moment we can't run webpack yet . to touch the index file in ./client.
and write down this :

import React from 'react';

import { render } from 'react-dom';

import App from './components/App';

render(<App />, document.getElementById('app'));

You can see that this file is dependent on another file names ./components/App. So we need to build it :

import React from 'react';

class App extends React.Component { // eslint-disable-line react/prefer-stateless-function
  render() {
    return (
      <h1>Hello my scaffold! ~~</h1>
    );
  }
}

export default App;

It's worth to mentioning why I use the class in App.js, if it 's a pure function we can 't make it updating automatically .Pure function without life cycles.

And now we can make work and you can check localhost: 3333 to see how beautiful the project in the browser. and you can edit files and see it changes without waiting.

This part is over . Thank reading.
If having any problem you can contact me .