Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/labor-digital/asset-building-dev-server
An extension to our asset-builder that provides a dev server environment for webpack. Including support for multi-compilers and expres
https://github.com/labor-digital/asset-building-dev-server
Last synced: about 1 month ago
JSON representation
An extension to our asset-builder that provides a dev server environment for webpack. Including support for multi-compilers and expres
- Host: GitHub
- URL: https://github.com/labor-digital/asset-building-dev-server
- Owner: labor-digital
- License: apache-2.0
- Created: 2020-02-17T20:09:09.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2022-07-20T21:31:40.000Z (over 2 years ago)
- Last Synced: 2024-11-07T09:30:23.366Z (about 2 months ago)
- Language: TypeScript
- Size: 2.85 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# LABOR - Asset Building - Dev Server Extension
**This package is an extension to our [asset building bundle](https://www.npmjs.com/package/@labor-digital/asset-building).**When it comes to developing Single page applications (SPAs), you will find out sooner or later that it is convenient to have a local dev server that supports stuff like "hot-module-replacement".
The problem with webpack's default dev-server was, it does not work correctly when multiple apps run in the same domain (frontend and backend, for example). It also only works with real "webpack.js" files and not with the dynamic version we use.
To circumvent that, and to make the integration as smooth as possible, we created our own dev server using express and webpack's middleware capabilities.## Installation
* Install our asset builder:
```
npm install --save-dev @labor-digital/asset-building
```
* Install the npm dependency:
```
npm install --save-dev @labor-digital/asset-building-dev-server
```
* Add the provider plugin to your package.json
```
{
"builderVersion": 2,
[...]
"extensions": [
"@labor-digital/asset-building-dev-server"
]
}
```
* Add the following part to your package.json:
```
"scripts": {
[...]
"dev": "labor-asset-building dev"
}
```
* Start your server by running "npm run dev" -> The urls are printed to the console
* Done! :-)## Adding the dev server to express apps
Our asset builder can run as a middleware in express, providing
hot module replacement and webpack's dev features in the same way the "dev" command does for virtually
every express app.**We provide a function you can use in your server.js file. It will only apply
the required middlewares if your NODE_ENV variable is set to "development".**Register the express plugin in your index.js like:
```javascript
const expressAssetBuildingPlugin = require("@labor-digital/asset-building/dist/Interop/Express/expressAssetBuildingPlugin.js");
const expressDevServerPlugin = require("@labor-digital/asset-building-dev-server/dist/ExpressDevServerPlugin");
const express = require("express");
const app = express();// Apply the dev server plugin to the app
expressAssetBuildingPlugin(app)
.then(expressDevServerPlugin)
.then(() => {
// Your express - app setup goes here...
});
```## Changing the visible URL in the console
By default, the console will show a URL like http://js.localmachine.space:9999 when you are launching a new instance of a project. If you want to change the URL, you can do so by adding the "devUrl" option to your labor configuration in your package.json. The {{port}} placeholder
will automatically be replaced with the correct port of your application.
```
{
[...]
"labor": {
"devUrl": "http://yourUrl:{{port}}"
}
}
```## Whats xyz.localmachine.space?
To work locally, you can work with an IP like 127.0.0.1, localhost, or you can point a DNS record to your local machine.
The localmachine.space domain is precisely that. It is a domain name that always leads to "127.0.0.1", no matter what subdomain you use.
Its a helper to make dev URLs more comfortable to read; it works on every machine as long as you have an internet connection.## Postcardware
You're free to use this package, but if it makes it to your production environment, we highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using.Our address is: LABOR.digital - Fischtorplatz 21 - 55116 Mainz, Germany.
We publish all received postcards on our [company website](https://labor.digital).