Rewrite personal site with React

Now learn React and want to rewrite personal website from simple html/js/css to React builded with webpack and react-router

Use some sources for  this. Full list of sources:

Used newCreate-React-App hello world ! . But it fails then need publish production version. Maybe wasn’t good idea use it for website.

Tutorials:

Then made development version discover problem with hosting compiled production version by

react-scripts

Solution was create new project with webpack and configuration myself development and production process. After copy created components from first project to second project.

Where is package.json:

{
  "name": "site2",
  "version": "0.5.0",
  "private": true,
  "homepage": "http://poplauki.eu",
  "devDependencies": {
    "react-hot-loader": "^1.3.0",
    "webpack-dev-server": "^1.12.1"
  },
  "dependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.8",
    "babel-plugin-react-transform": "^2.0.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "css-loader": "^0.26.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "path": "^0.12.7",
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "react-router": "^3.0.0",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.3"
  },
  "scripts": {
    "start": "",
    "build": "NODE_ENV=production webpack --progress",
    "test": "",
    "production": "rm -rf public/index.html && NODE_ENV=production webpack -p && cp view/index_production.html public/index.html",
    "development": "cp view/index.html public/index.html && NODE_ENV=development webpack && webpack-dev-server --content-base public/ --hot --inline --devtool inline-source-map --history-api-fallback"
  }
}

And webpack.config.js : 

// webpack.config.js

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

if(process.env.NODE_ENV === 'development'){
    const loaders = ['babel']
} else {
    const loaders = ['babel']
}
module.exports = {
    devtool: 'eval',
    entry: './src/index.js',
    output: {
        path: __dirname + '/public/dist',
        filename: 'bundle.js',
        publicPath: '/dist/'
    },
    resolve: {
        modulesDirectories: ['node_modules']
    },
    module: {
        loaders: [{
            test: /\.js$/,
            loaders: ['babel?presets[]=react,presets[]=es2015'],
            exclude: /node_modules/
        },
        {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
        },
        {
            test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            loader: 'url?limit=10000'
        },
        {
            test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
            loader: 'file'
        },
        {
            test: /\.html$/,
            loader: 'file'
        }],
        modulesDirectories: [
            'node_modules'
        ]
    },
    plugins: [
        new ExtractTextPlugin('bundle.css'),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
        }),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({
            compress: { warnings: false },
            mangle: true,
            sourcemap: false,
            beautify: false,
            dead_code: true
        })
    ]
};

For use react-router compile with webpack replace this code in the index.js :

render(
<RouterDefault history={browserHistory}>
<Route path="/" component={Site} />
<Route path="/projects" component={Projects} />
<Route path="/about" component={About} />
<Route path="/socials" component={Social} />
</RouterDefault>,
document.getElementById('root')
);

to this

const App = () => (
<Router history={hashHistory}>
<Route path='/' component={Landing} />
<Route path='/search' component={Search} />
</Router>
)
ReactDOM.render(<App />, document.getElementById('app'))

At finish have problem with collection styles – help this article

Next todo :
Compile fast css and javascript. With map and gziped verions

Leave a Reply

Your email address will not be published. Required fields are marked *