Skip to content

Commit 9215ee3

Browse files
Update README.md
1 parent b6e2274 commit 9215ee3

File tree

1 file changed

+53
-2
lines changed
  • src/Microsoft.AspNetCore.SpaServices

1 file changed

+53
-2
lines changed

src/Microsoft.AspNetCore.SpaServices/README.md

Lines changed: 53 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -325,9 +325,60 @@ Benefits:
325325

326326
It lets you work as if the browser natively understands whatever file types you are working with (e.g., TypeScript, SASS), because it's as if there's no build process to wait for.
327327

328+
### Example: A simple Webpack setup
329+
330+
**Note:** If you already have Webpack in your project, then you can skip this section.
331+
332+
As a simple example, here's how you can set up Webpack to build TypeScript files. First install the relevant NPM packages by executing this from the root directory of your project:
333+
334+
```
335+
npm install --save typescript ts-loader
336+
```
337+
338+
And if you don't already have it, you'll find it useful to install the `webpack` command-line tool:
339+
340+
```
341+
npm install -g webpack
342+
```
343+
344+
Now add a Webpack configuration file. Create `webpack.config.js` in the root of your project, containing the following:
345+
346+
```javascript
347+
module.exports = {
348+
resolve: {
349+
// For modules referenced with no filename extension, Webpack will consider these extensions
350+
extensions: [ '', '.js', '.ts' ]
351+
},
352+
module: {
353+
loaders: [
354+
// This example only configures Webpack to load .ts files. You can also drop in loaders
355+
// for other file types, e.g., .coffee, .sass, .jsx, ...
356+
{ test: /\.ts$/, loader: 'ts-loader' }
357+
]
358+
},
359+
entry: {
360+
// The loader will follow all chains of reference from this entry point...
361+
main: ['./ClientApp/MyApp.ts']
362+
},
363+
output: {
364+
// ... and emit the built result in this location
365+
path: __dirname + '/wwwroot/dist',
366+
filename: '[name].js'
367+
},
368+
};
369+
```
370+
371+
Now you can put some TypeScript code (minimally, just `console.log('Hello');`) at `ClientApp/MyApp.ts` and then run `webpack` from the command line to build it (and everything it references). The output will be placed in `wwwroot/dist`, so you can load and run it in a browser by adding the following to one of your views (e.g., `Views\Home\Index.cshtml`):
372+
373+
<script src="/dist/main.js"></script>
374+
375+
The Webpack loader, `ts-loader`, follows all chains of reference from `MyApp.ts` and will compile all referenced TypeScript code into your output. If you want, you can create a [`tsconfig.json` file](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) to control things like whether source maps will be included in the output. If you add other Webpack loaders to your `webpack.config.js`, you can even reference things like SASS from your TypeScript, and then it will get built to CSS and loaded automatically.
376+
377+
So that's enough to build TypeScript. Here's where webpack dev middleware comes in to auto-build your code whenever needed (so you don't need any file watchers or to run `webpack` manually), and optionally hot module replacement (HMR) to push your changes automatically from code editor to browser without even reloading the page.
378+
328379
### Enabling webpack dev middleware
329380

330-
After installing the `Microsoft.AspNetCore.SpaServices` NuGet package and the `aspnet-webpack` NPM package, go to your `Startup.cs` file, and **before your call to `UseStaticFiles`**, add the following:
381+
First install the `Microsoft.AspNetCore.SpaServices` NuGet package and the `aspnet-webpack` NPM package, then go to your `Startup.cs` file, and **before your call to `UseStaticFiles`**, add the following:
331382

332383
```csharp
333384
if (env.IsDevelopment()) {
@@ -337,7 +388,7 @@ if (env.IsDevelopment()) {
337388
// You call to app.UseStaticFiles(); should be here
338389
```
339390

340-
You will also need to edit your webpack configuration at `webpack.config.js`. Since `UseWebpackDevMiddleware` needs to know which incoming requests to intercept, specify a `publicPath` value on your `output`, for example:
391+
Also check your webpack configuration at `webpack.config.js`. Since `UseWebpackDevMiddleware` needs to know which incoming requests to intercept, make sure you've specified a `publicPath` value on your `output`, for example:
341392

342393
```javascript
343394
module.exports = {

0 commit comments

Comments
 (0)