CODEWITHSUNDEEP
reactjswebpackbuildgulppackage.json
sayayin
sayayin

Reputation: 1041

React Build Tool and Dev Server

Need some direction in terms of setting up the DEV environment and server for a project I'm starting for learning purposes. I want to use ReacJS with Bootstrap. Last time I worked with ReactJS, the build and server was already configured and I did not have to do much. We were using npm, gulp and bunch of other stuff.

Now that I'm trying to set this up, I'm not sure what to do. Can someone outline the simplest steps I can follow. I want to use latest versions of React eco-system and ideally have a build system to minify and combine files and stuff. There is so much info on Google that it is confusing. Another challenge I'm facing is that which versions to specify in package.json. Instead of gulp I decided to use webpack. Wasn't really sure if to go with gulp or webpack but decided to go with webpack. It is all working but not sure if I have the most updated versions of everything or need more stuff. I know for sure I don't have any watchers to auto refresh page on changes. For server I'm just using npm, not sure if that is all I need or there are any advantages of using others. This is my package.json

   {
  "name": "track",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --port 3000 --progress --inline",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
    "dependencies": {
    "html-webpack-plugin": "^2.29.0",
    "path": "^0.12.7",
    "react": "^16.0.0",
    "react-dom": "^15.6.1",
    "webpack": "^3.0.0",
    "webpack-dev-server": "^2.5.0"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.0",
    "babel-preset-es2017": "^6.24.1",
    "babel-preset-react": "^6.24.1"
  }
}

Below is the webpack.config.js

module.exports = {
  entry: './src/app.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: { presets: [ 'es2015', 'react' ] }
      }
    ]
  }
};

Upvotes: 2

Views: 1806

Answers (1)

Aaqib
Aaqib

Reputation: 10350

Can someone outline the simplest steps I can follow.

I have faced very similar situation but i was working with react, redux, react-redux, other libraries and using axios for sending (http) request where i have to figure out by myself , Here's what i did :

NOTE: Make sure you have Node.js installed because i have Node along with webpack-dev-server here

npm init

Installed project dependencies using npm. Inside script i have given link to node and webpack-dev-server as you can see

package.json 

{
  "name": "searchapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.3"
  },
  "dependencies": {
    "babel-preset-stage-1": "^6.24.1",
    "lodash": "^4.17.4",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-redux": "^5.0.6",
    "react-router-dom": "^4.2.2",
    "redux": "^3.7.2",
    "redux-promise": "^0.5.3"
  }
}

And this is webpack.config.js

var webpack = require('webpack');
var path = require('path');

module.exports = {
  entry: {
    bundle: './src/index.js',
  },

   output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel-loader',
      query: {
        presets: ['react', 'es2015', 'stage-1']
      }
    }]
  },
   resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

And then make sure to include .babelrc

{
  "presets": ["react", "es2015", "stage-1"]
}

And if you have github repository make sure to include .gitignore file so that these folders or files will not be included in git repo

.gitignore

/node_modules
bundle.js
npm-debug.log
.DS_Store

If you think all of this is overwhelming and too much for a start then best place to start with is create-react-app

Upvotes: 1

Related Questions