Setting up a development environment with Vue, JSX and Webpack
Tags: vue, webpack, jsx
Published: 2020-02-16 12:24:41

In this post, I will show you how to set up a development environment for **Vue** with **JSX** and ***webpack***.

We will be using `npm` package manager. You start by creating a folder and inside it, you do in console `npm init -y` to create `package.json` project file, wich the dependencies of the project and much more are set.

These are the dependencies to be installed with `npm`:
```javascript
    "@babel/core": "^7.8.3",
    "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
    "@vue/babel-preset-jsx": "^1.1.2",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.4.2",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^1.1.3",
    "vue": "^2.6.11",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.1"
```

You install each of the dependencies above by doing `npm i name_of_the_dependency`, so one command that should install all of the dependencies above will be:

`npm i @babel/core @vue/babel-helper-vue-jsx-merge-props @vue/babel-preset-jsx babel-loader css-loader html-webpack-plugin style-loader vue webpack webpack-cli webpack-dev-server`

Once done that, a `node_modules` folder will be created inside the project containing all the source code of the dependencies installed and much more. Now, you are able to proceed.

Next thing to do it is to set up *webpack* configuration file. This will be `webpack.config.js`. You create this file in the project and set its content to the next:

```javascript
const HtmlWebpackPlugin=require('html-webpack-plugin')

module.exports={
    entry:'./src/index.js',
    plugins:[
        new HtmlWebpackPlugin({
            template:'src/public/index.html',
            favicon:'src/public/favicon.ico'
        })
    ],
  module: {
    rules: [
      {
        test: /\.js?$/,
        loader: "babel-loader"
      },
      {
        test: /\.css$/i,
        use: [
          'style-loader', 
          { 
            loader: 'css-loader', 
            options: { 
              modules: true 
            } 
          },
        ],
      },
    ]
}
}
```

Next thing to do it is to create `.babelrc` configuration file:

```javascript
{
    "presets": ["@vue/babel-preset-jsx"]
}
```

Now you create a `src` folder where all your content will be put. Inside of the `src` folder, you create `index.js` file. This will be the entry point for *webpack*. In `index.js` you put the following content:

```javascript
import App from './components/app/app'

new App({
    el:'#app'
})
```

You must create another folder, inside `src`, named `public` where you will put your `index.html` file and your `favicon.ico`.

`index.html`
```javascript
<!DOCTYPE html>
<html>
    <head>
        <title>title</title>
    </head>
    <body>
        <div id='app'></div>
    </body>
</html>
```

Now, you create, inside `src` folder, another folder named `components`. Inside of the `components` folder, you create a folder named `app`. Inside of it, you create two files, `app.css` and `app.js`.

`app.css`
```javascript
.app{
    font-family:sans-serif;
}
```

`app.js`
```javascript
import Vue from 'vue'
import s from './app.css'

export default Vue.extend({
    name:'app',
    render(){
        return (
            <div class={s.app}>
                hello
            </div>
        )
    }
})
```

With this setup, we will have scoped styles (styles or CSS class names scoped to this component instances only).

And you are ready to go. The next thing to do is to type in console `npx webpack-dev-server` to start the development server and browse to page ***localhost:8080*** in your browser to see the page (app) in action.

When you want to build it, you type in console `npx webpack`. This will produce a `dist` folder which you can deploy to your hosting service.