DEV Community: Rahimuddin

Emporter - a saviour for exposing localhost to web

Rahimuddin — Fri, 29 Apr 2022 13:37:32 +0000

TLDR: Emporter is a simple tool using which you can expose your localhost to web in realtime. It's free and no complex configuration.

Jump to "How to use"

So the requirement was I wanted to work on the responsiveness of a web application but I wanted for a specific device and a real device because I wanted to test the "Reachability" mode on iOS.

I tried multiple solutions from stackoverflow and few youtube videos as well. I will give the examples because I know when someone visits this article they might already have the knowledge of other tools. If not they will have with this info :)

The below are the solutions which I have tried.

access localhost from mac to iPhone using network/sharing settings and connecting cable
Initially I thought it's a simple solution but may be because the laptop was provided by my organisation (network settings). I am not very sure though. Ideally it should have been worked with a simple solution like this
ngrok - I was unable to install it because it was a third party tool and my mac doesn't allow me.
Port2 app for mac - It was not free and the only one session it provided didn't work for me. It shows undefined url and simply didn't work

Then I found this mac app from app store and it worked like a charm.

How to use

Once you install this app, you will see the icon on the top menu bar. Once you click on that you will see there are no connections.
Click on the '+' icon

Because it's a premium version, it will generate a random url instead of the given name. You can click on the connection and "Reveal in browser". It's live and it's realtime.

If at all this article is helpful, do give it a 'Heart'. Always appreciate it. :)

Minimize the below code

Rahimuddin — Fri, 15 Jan 2021 10:46:55 +0000

How to handle this with less code?

if (customerIdNumber === '' || customerIdNumber === 'null' || customerIdNumber === null || isNaN(customerIdNumber)) { alert('success'); }

I'm already using lodash library in the project. So I've tried to use this.
_.isEmpty(customerIdNumber) but this doesn't work for all above.

Add .less/.scss global styles in storybook

Rahimuddin — Tue, 22 Sep 2020 12:54:41 +0000

I am trying to integrate storybook tool with my react app. My app is using .less styles and I've a single file in which all the styles are written (though I am not a big fan of this practice :))

It works for v6 but I am not sure about lower versions. You guys can give it a try.

After successful installation of storybook, we have two files (main.js and preview.js) in .storybook folder. As we know main.js is the config file for storybook and preview.js is the config file for our stories.

The idea is here to include Webpack configuration in storybook.
Question: How can we do it?
Ans: Using main.js file

Step1:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app",
    '@storybook/preset-scss'
  ],
  webpackFinal: async (config, { configType }) => {
    config.module.rules.push({
      // this is for both less and scss
      test: /.*\.(?:le|c|sc)ss$/,
      loaders: [
        'style-loader',
        'css-loader',
        'less-loader', // if scss then add 'sass-loader'
      ]
    });
    config.plugins.push(new MiniCssExtractPlugin({
      filename: '[name]-[contenthash].css',
      chunkFilename: '[id]-[contenthash].css',
    }));
    return config;
  },
}

Here config is the object of existing storybook's webpack configuration. We are pushing the rules and plugins to this config object.

Step2:

In preview.js file include the below line

for less:
import '!style-loader!css-loader!less-loader!../YOUR_LESS_FILE.less';

for scss:
import '!style-loader!css-loader!sass-loader!../YOUR_LESS_FILE.scss';

That's it. Now you can run storybook and preview the changes :)

PS: I would like to thank Bastien for this reply on github thread.
https://github.com/storybookjs/storybook/issues/6364#issuecomment-485651328

Also I would like to thank @codevolution youtube channel for his awesome tutorials on storybook.
https://www.youtube.com/playlist?list=PLC3y8-rFHvwhC-j3x3t9la8-GQJGViDQk

Decrease react app bundle size using webpack-merge

Rahimuddin — Thu, 23 Jul 2020 11:59:56 +0000

Hello,

First of all I am very new to writing articles. Please bear with me.

While developing a react app we generally have a local host server, hot-reloading and strong source mapping which don't need in production for obvious reasons. So it doesn't make sense to have these tools unnecessarily which increases the bundle size.

To minimize bundle size by having these tools only in development we can make use of a plugin called webpack-merge. So, to achieve this we are going to follow the below steps.

Step1:

Install webpack-merge using yarn add --dev webpack-merge or npm install --save-dev webpack-merge.

Step2:

split the existing webpack.config.js to three files.

webpack.common.js It contains the common code which we use for development and production both

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const localConfig = require('./src/common/localConfig');

module.exports = {
  entry: {
    index: './src/index.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'),
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
            plugins: [
              '@babel/plugin-transform-runtime',
              '@babel/plugin-proposal-class-properties'
            ]
          }
        }
      },{
        test: /logo.svg$/,
        loader: 'svg-url-loader'
      }, {
        test: /abcd-.*\.(?:le|c)ss$/,
        loaders: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'less-loader',
        ]
      }
    ],
  },
  plugins: [
    new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
    new HtmlWebpackPlugin({
      template: "./src/index.ejs",
      inject: true,
      filename: "./index.html",
      templateParameters: {
        'localConfig': localConfig
      }
    }),
    new MiniCssExtractPlugin({
      filename: '[name]-[contenthash].css',
      chunkFilename: '[id]-[contenthash].css',
    }),
    new CopyPlugin(
      [
        { from: 'public', to: '' },
      ],
    ),
  ],
  output: {
    filename: '[name].[hash].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

(the above is only sample code. It doesn't to match with yours)

webpack.dev.js It contains the development code which includes local server, hot reloading etc.

const { merge } = require('webpack-merge');
const common = require('./webpack.common');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    port: 3003,
    https: true,
    contentBase: './dist',
    hot: true,
    allowedHosts: [
      'local.dev.abcdefg.net'
    ],
    public: 'https://local.dev.abcdefg.net:3003/',
    publicPath: '/',
    open: {
      // This doesn't actually work
      app: ['firefox']
    }
  }
});

webpack.prod.js It contains the production related code which doesn't include much (specifically)

const { merge } = require('webpack-merge');
const common = require('./webpack.common');

module.exports = merge(common, {
  mode: 'production',
  devtool: 'source-map'
});

Step3:

run npm run build

Now you can compare the build size before and after. :)