✨ Add analyze-bundles example

Author: GuiDevloper

examples/analyze-bundles/.eslintrc.js

@@ -0,0 +1,19 @@
+module.exports = {
+  extends: 'plugin:nullstack/recommended',
+  rules: {
+    'nullstack/prettier': [
+      'warn',
+      {
+        // More options at https://prettier.io/docs/en/options
+        trailingComma: 'all',
+        tabWidth: 2,
+        semi: false,
+        singleQuote: true,
+        printWidth: 80,
+      },
+      {
+        usePrettierrc: false,
+      },
+    ],
+  },
+}

examples/analyze-bundles/.gitignore

@@ -0,0 +1,32 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+package-lock.json
+yarn.lock
+pnpm-lock.yaml
+
+# testing
+/coverage
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env
+
+# vercel
+.vercel
+
+# bundle folders
+.development/
+.production/

examples/analyze-bundles/README.md

@@ -0,0 +1,32 @@
+# Analyzer Bundles example
+
+This example shows how to analyze the output bundles using [webpack-bundle-analyzer](https://npmjs.com/package/webpack-bundle-analyzer)
+
+## Analyze webpack output
+
+To analyze your webpack output, invoke the following command:
+
+```bash
+npm run analyze
+```
+
+It will build the app, generate JSON stats files for both server and client bundles and then open them in the browser at `localhost` ports `8880` and `8881` respectively.
+
+> Don't forget to select `Show content of concatenated modules` option on the sidebar and `Stat` is the most complete Treemap size
+
+## Deploy your own
+
+Deploy it now with [Vercel](https://vercel.com) or preview on [StackBlitz](https://stackblitz.com):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/GuiDevloper/nullstack-examples/tree/main/examples/analyze-bundles&project-name=analyze-bundles&repo-name=analyze-bundles&demo-title=Nullstack+analyzeBundles&demo-description=Nullstack+example+of+analyze+bundles&demo-url=https://github.com/GuiDevloper/nullstack-examples/tree/main/examples/analyze-bundles&demo-image=https://nullstack.app/image-1200x630.png)
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/fork/github/GuiDevloper/nullstack-examples/tree/main/examples/analyze-bundles?title=Nullstack+AnalyzeBundles)
+
+## How to use
+
+Execute [`nulla create`](https://github.com/GuiDevloper/nulla) with [npm](https://docs.npmjs.com/cli/init):
+
+```bash
+npx nulla create --example analyze-bundles analyze-bundles-app
+```
+
+Then deploy it with [Vercel](https://github.com/GuiDevloper/nulla/blob/main/docs/en-US/deploy-vercel.md), [Heroku](https://github.com/GuiDevloper/nulla/blob/main/docs/en-US/deploy-heroku.md) or [Netlify](https://github.com/GuiDevloper/nulla/blob/main/docs/en-US/deploy-netlify.md).

examples/analyze-bundles/client.ts

@@ -0,0 +1,5 @@
+import Nullstack from 'nullstack'
+
+import Application from './src/Application'
+
+export default Nullstack.start(Application)

examples/analyze-bundles/package.json

@@ -0,0 +1,22 @@
+{
+  "private": true,
+  "dependencies": {
+    "@faker-js/faker": "^8.0.2"
+  },
+  "devDependencies": {
+    "cross-env": "^7.0.3",
+    "nullstack": "0.20.0",
+    "webpack-bundle-analyzer": "^4.9.0"
+  },
+  "scripts": {
+    "start": "npx nullstack start",
+    "build": "npx nullstack build",
+    "analyze": "cross-env ANALYZE=true npm run build",
+    "vercel-build": "npm run build && npx nullstack-adapt-vercel"
+  },
+  "stackblitz": {
+    "installDependencies": false,
+    "startCommand": "npm i [email protected] -D && nullstack-adapt-babel && npm start",
+    "compileTrigger": "save"
+  }
+}

examples/analyze-bundles/public/favicon-96x96.png

@@ -0,0 +1,5 @@
+import Nullstack from 'nullstack'
+
+import Application from './src/Application'
+
+export default Nullstack.start(Application)

examples/analyze-bundles/server.ts

@@ -0,0 +1,5 @@
+const About = () => {
+  return <div>About us</div>
+}
+
+export default About

examples/analyze-bundles/src/About.tsx

@@ -0,0 +1,18 @@
+* {
+  padding: 0;
+  margin: 0;
+  text-decoration: none;
+  list-style: none;
+  box-sizing: border-box;
+}
+
+body {
+  background-color: #111827;
+  color: #fff;
+  font-family: sans-serif;
+}
+
+a {
+  color: #f15d9f;
+  margin-left: .3em;
+}

examples/analyze-bundles/src/Application.css

@@ -0,0 +1,30 @@
+import './Application.css'
+import Nullstack from 'nullstack'
+
+import { faker } from '@faker-js/faker'
+
+import About from './About'
+
+// The name will be generated at build time only
+const name = faker.person.fullName()
+
+class Application extends Nullstack {
+
+  render() {
+    return (
+      <main>
+        <div route="/">
+          <h1>Home Page</h1>
+          <p>Welcome, {name}</p>
+          <div>
+            <a href="/about">About Page</a>
+          </div>
+        </div>
+        <About route="/about" />
+      </main>
+    )
+  }
+
+}
+
+export default Application

examples/analyze-bundles/src/Application.tsx

@@ -0,0 +1,5 @@
+const Contact = () => {
+  return <div>This is the contact page.</div>
+}
+
+export default Contact

examples/analyze-bundles/src/Contact.tsx

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "strict": false,
+    "noImplicitAny": false,
+    "jsx": "preserve",
+    "lib": ["ES2020", "DOM"]
+  }
+}

examples/analyze-bundles/tsconfig.json

@@ -0,0 +1,29 @@
+const configs = require('nullstack/webpack.config')
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
+
+const bundlesTitles = ['server', 'client']
+function withBundleAnalyzer(config, id) {
+  if (!process.env.ANALYZE) return config
+
+  const title = bundlesTitles[id]
+  config.plugins.push(
+    new BundleAnalyzerPlugin({
+      generateStatsFile: true,
+      statsFilename: `${title}.json`,
+      reportTitle: title,
+      analyzerPort: `888${id}`,
+      analyzerHost: 'localhost',
+    }),
+  )
+  return config
+}
+
+function customConfigs() {
+  return configs.map((originalConfig, id) => {
+    return (...args) => {
+      return withBundleAnalyzer(originalConfig(...args), id)
+    }
+  })
+}
+
+module.exports = customConfigs()