2021 04 25

After learning the basics of yarn workspaces, I’ve gone down a rabbit-hole of learning about microfrontends. This is an advanced frontend architecture pattern that lets you stitch together different parts of your app using different frameworks. On the surface this sounds like an awful idea, the runtime overhead must be pretty bad if you’re using React, svelte and vue all in the same app. However, the buisness case for when a very large apps is trying to move away from a specific framework, or if you want to different teams to own different sections of an app. e.g checkout and product navigation in an large e-commerce site. For own very basic use case of this I want to make lots of different utilities using any FE framework I want, but also stitch it altogether in a single SPA, then host it on netlify.

I think this is possible when you combine the various technologies like yarn workspaces, webpack 5 federation and microfrontend frameworks like [single SPA](https://single-spa.js.org/docs/getting-started-overview.

this guy has got it working!

Learning webpack basics, something that i’ve been meaning to do! currently working through this tutorial

• Fun fact about webpack is that it’s actually zero config out the box. As long as you have webpack-cli installed via npm, all your source files just need to be in a ./src directory, then running npx webpack will bundle all everything and output to a /.dist directory.
• babel is used to alongside with webpack to transpile javascript. difference between compiling and transpiling?
  • compiling is to a difference output
  • transpiling is to the same language but either to newer or older versions of the language
• Very basic webpack.config.jsfile
  • target all .js files
  • ignore anything in node_modules
  • also use babel to transpile, babel-loader will look at your .babelrc for how you want to transpile your js.

module.exports = {
module:{
  rules: [
    {
      test: /\.js$/,
      exclude:  /node_modules/,
      use: {
        // without additional settings this will reference .babelrc
        loader: 'babel-loader'
      }
    }

  ]
}
}

• more webpack.config.js settings, mode: 'development'. bundles the js in a development mode which allows for source maps for easier debugging.
• devtool: 'source-map' lets you see the og file which webpack bundled from and even set breakpoints.
• entry: './src/index.js', is a way to provide a specific entry point, it defaults searching at ./src
• Over ride the output location like so. Note path needs to be imported in with const path = require('path'). output: { filename: 'bundle.js', path: path.resolve(__dirname, 'public') }
• devServer: {contentBase: './dist'} used along with webpack-dev-server means you can run webpack serve to have dev server with HMR support quite easily.
• note webpack serve bundles and serves the assets in memory so you will not see the changes written to disk.