Skip to content

Latest commit

 

History

History
45 lines (42 loc) · 1.64 KB

ENV.md

File metadata and controls

45 lines (42 loc) · 1.64 KB
Raw

Get your project environment started for chat-bubble with Yarn and WebPack

This readme is based on this guide (no relation).

It's presumed that you have Yarn installed on your system. NPM will work too, but you'll need to switch the commands. This guide does not include versioning (like GitHub) setup which you should probably have as well.

  1. Run yarn init in your project directory. You can leave all fields blank.
  2. Run yarn add webpack webpack-dev-server babel-core babel-loader babel-preset-es2015 --save-dev
  3. Create webpack.config.js in the root of your project directory with the following code:
module.exports = {
    entry: './app/main.js',
    output: {
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                loader: 'babel-loader',
                test: /\.js$/,
                exclude: /node_modules/
            }
        ]
    },
    devServer: {
        port: 3000
    },
    devtool: 'inline-source-map'
};
  1. Create index.html inside the root of your project directory:
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>My chat-bubble Project</title>
</head>
<body>
  <script src="./bundle.js"></script>
</body>
</html>
  1. Run yarn add chat-bubble and create /app direcotry with main.js that has the sample code from README.md.

Now you can run yarn webpack-dev-server and open http://localhost:3000 in your browser to test your project!