feat: live reload on dev environment

gabrieljablonski · gabrieljablonski · commit 9daa533cae1e · 2023-03-05T13:32:44.000-03:00
diff --git a/esbuild.config.dev.mjs b/esbuild.config.dev.mjs
@@ -7,6 +7,7 @@ const ctx = await esbuild.context({
   bundle: true,
   outdir: 'build',
   treeShaking: true,
+  logLevel: 'info',
   plugins: [
     cssModulesPlugin({
       v2: true,
@@ -22,11 +23,8 @@ fs.copyFile('./public/index.html', './build/index.html', (err) => {
 })
 
 await ctx.watch()
-
-const { port } = await ctx.serve({
+await ctx.serve({
   servedir: 'build',
   port: 3000,
   host: 'localhost',
 })
-
-console.log(`\n\n# Live Server: localhost:${port}`)
diff --git a/public/index.html b/public/index.html
@@ -8,6 +8,9 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>Dev - React Tooltip</title>
     <link rel="stylesheet" href="/index-dev.css" />
+    <script>
+      new EventSource('/esbuild').addEventListener('change', () => location.reload())
+    </script>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app. Please enable JavaScript 😭</noscript>
