Deploying your app to Netlify with Travis using Webpack

.travis.yml

language: node_js
node_js:
  - 12
before_script:
  - npm install
  - npm run build
deploy:
  provider: netlify
  site: SITE_ID
  edge: true
  dir: ./dist

README.md

Deploying your app to Netlify with Travis using Webpack

Here you can find the steps to deploy your app/site, I put all the infos together about Netlify, Travis and Webpack configuration.

Netlify config

1. log into your netlify account
2. create an app in New OAuth App
3. get the access token number, click on New access token and keep it because it will be disappear eventually
4. create a site, go to site's settings and get the API ID

Travis config

1. activate travis to your github's repo
2. create .travis.yml, see the travi's file
3. change the site_id
4. install travis command line (mac: brew install travis)
5. add netlify auth key travis encrypt --add deploy.auth NETLIFY_ACCESS_TOKEN
6. set env variables through travis travis env set <VARIABLE_NAME> <VARIABLE_VALUE>, e.g: travis env set SITE_URL https://5f54c3de080cf05d5362f758--thirsty-agnesi-9078d4.netlify.app/

Webpack config

1. add build script to package.json"build": "webpack --mode production --env.TWITCH_URL=$TWITCH_URL --env.TOKEN=$TOKEN --env.CLIENT_ID=$CLIENT_ID"
2. add dev script to package.json "start": "webpack-dev-server --env.TWITCH_URL=<YOUR_TWITCH_URL> --env.TOKEN=<YOUR_TOKEN> --env.CLIENT_ID=<YOUR_CLIENT_ID>",
3. add webpack.DefinePlugin to webpack's plugin

new webpack.DefinePlugin({
        "process.env.TWITCH_URL": JSON.stringify(env.TWITCH_URL),
        "process.env.TOKEN": JSON.stringify(env.TOKEN),
        "process.env.CLIENT_ID": JSON.stringify(env.CLIENT_ID),
      }),

4. convert webpacks module.export to function to accepts env parameter

module.exports = (env) => {
console.log(env); 
  return {
    module: {
    .
    .
    .
    plugins: [
      new HtmlWebPackPlugin({
        template: "./public/index.html",
        filename: "./index.html",
      }),
      new webpack.SourceMapDevToolPlugin({}),
      new webpack.DefinePlugin({
        "process.env.TWITCH_URL": JSON.stringify(env.TWITCH_URL),
        "process.env.TOKEN": JSON.stringify(env.TOKEN),
        "process.env.CLIENT_ID": JSON.stringify(env.CLIENT_ID),
      }),
    ],
  };
};

webpack.config.js

const webpack = require("webpack");
const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = (env) => {
  return {
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader",
          },
        },
        {
          test: /\.html$/,
          use: [
            {
              loader: "html-loader",
            },
          ],
        },
        {
          test: /\.js$/,
          enforce: "pre",
          use: ["source-map-loader"],
        },
        {
          test: /\.css$/i,
          use: ["style-loader", "css-loader"],
        },
        {
          test: /\.(png|svg|jpg|gif|jpeg)$/,
          use: ["file-loader"],
        },
      ],
    },
    devtool: false,
    devServer: {
      historyApiFallback: true,
    },
    plugins: [
      new HtmlWebPackPlugin({
        template: "./public/index.html",
        filename: "./index.html",
      }),
      new webpack.SourceMapDevToolPlugin({}),
      new webpack.DefinePlugin({
        "process.env.TWITCH_URL": JSON.stringify(env.TWITCH_URL),
        "process.env.TOKEN": JSON.stringify(env.TOKEN),
        "process.env.CLIENT_ID": JSON.stringify(env.CLIENT_ID),
      }),
    ],
  };
};