Merge pull request #992 from kevinmcconnell/dev-server

Add a `yarn start` for easier local development
basecamp · Sep 20, 2022 · 5e1d351 · 5e1d351
2 parents b3ae240 + f2cc1c3
commit 5e1d351
Show file tree

Hide file tree

Showing 4 changed files with 707 additions and 31 deletions.
diff --git a/README.md b/README.md
@@ -404,15 +404,20 @@ You can run a watch process to automatically generate distribution files when yo
 $ yarn watch
 ```
 
-When the watch process is running you can run a web server on the `/dist` directory to serve the compiled assets. For example:
+When the watch process is running you can run a web server to serve the compiled assets:
 
 ```
-$ cd dist/
-$ python3 -m http.server
+$ yarn dev
 ```
 
 With the development server running, you can visit `/index.html` to see a Trix debugger inspector, or `/test.html` to run the tests on a browser.
 
+For easier development, you can watch for changes to the JavaScript and style files, and serve the results in a browser, with a single command:
+
+```
+$ yarn start
+```
+
 ### Running Tests
 
 You can also run the test in a headless mode with:

diff --git a/assets/index.html b/assets/index.html
@@ -13,7 +13,7 @@
         max-width: 700px;
       }
     </style>
-    <script type="module" src="trix.min.js"></script>
+    <script type="module" src="trix.esm.js"></script>
     <script type="module" src="inspector.js"></script>
     <script type="module">
       Trix.config.attachments.preview.caption.name = true
@@ -50,6 +50,8 @@
           }, 30)
         }
       });
+
+      Trix.start()
     </script>
   </head>
   <body>

diff --git a/package.json b/package.json
@@ -31,7 +31,9 @@
     "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
+    "@web/dev-server": "^0.1.34",
     "babel-eslint": "^10.1.0",
+    "concurrently": "^7.4.0",
     "eslint": "^7.32.0",
     "esm": "^3.2.25",
     "karma": "6.4.0",
@@ -56,7 +58,9 @@
     "pretest": "yarn run lint && yarn run build",
     "test": "karma start",
     "postversion": "git push && git push --tags",
-    "release": "yarn test && npm adduser && yarn version && npm publish"
+    "release": "yarn test && npm adduser && yarn version && npm publish",
+    "dev": "web-dev-server --app-index index.html  --root-dir dist --node-resolve --open",
+    "start": "concurrently --kill-others --names js,css,dev-server 'yarn watch' 'yarn build-css --watch' 'yarn dev'"
   },
   "dependencies": {}
 }