Skip to content

Commit 39b75db

Browse files
committed
feat(webpack-dev-server): add server-config option to ng serve
remove commented lines
1 parent 3459300 commit 39b75db

File tree

5 files changed

+65
-0
lines changed

5 files changed

+65
-0
lines changed

README.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -229,6 +229,26 @@ and then we edit the `package.json` file's start script to be
229229

230230
now run it with `npm start`
231231

232+
### Mocking a Static Backend
233+
Webpack dev server allows us to modify the ExpressJS `app` object using the `setup` method.
234+
We do this by passing a file to `--server-config`
235+
236+
We create a file next to the projects `package.json` called `server.conf.js` with the content
237+
238+
```json
239+
module.exports = function(app){
240+
app.get('/api/*', function(req, res){
241+
res.sendFile(req.originalUrl, {root: __dirname + '/mocks/'});
242+
});
243+
};
244+
245+
```
246+
247+
now run it with `ng serve --server-config server.conf.json`
248+
249+
Thus fetches to `/api/foo` will return flat json from `/mocks/api/foo`
250+
251+
232252
### Deploying the app via GitHub Pages
233253

234254
You can deploy your apps quickly via:

packages/angular-cli/commands/serve.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export interface ServeTaskOptions {
1515
port?: number;
1616
host?: string;
1717
proxyConfig?: string;
18+
serverConfig?: any;
1819
watcher?: string;
1920
liveReload?: boolean;
2021
liveReloadHost?: string;
@@ -53,6 +54,7 @@ const ServeCommand = Command.extend({
5354
description: 'Listens only on localhost by default'
5455
},
5556
{ name: 'proxy-config', type: 'Path', aliases: ['pc'] },
57+
{ name: 'server-config', type: 'Path', aliases: ['sc'] },
5658
{ name: 'watcher', type: String, default: 'events', aliases: ['w'] },
5759
{ name: 'live-reload', type: Boolean, default: true, aliases: ['lr'] },
5860
{

packages/angular-cli/custom-typings.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ interface IWebpackDevServerConfigurationOptions {
44
historyApiFallback?: {[key: string]: any} | boolean;
55
compress?: boolean;
66
proxy?: {[key: string]: string};
7+
setup?: any;
78
staticOptions?: any;
89
quiet?: boolean;
910
noInfo?: boolean;

packages/angular-cli/tasks/serve-webpack.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,17 @@ export default Task.extend({
6969
}
7070
}
7171

72+
let serverConfig = {};
73+
if (serveTaskOptions.serverConfig) {
74+
const serverConfigPath = path.resolve(this.project.root, serveTaskOptions.serverConfig);
75+
if (fs.existsSync(serverConfigPath)) {
76+
serverConfig = require(serverConfigPath);
77+
} else {
78+
const message = 'Server config file ' + serverConfigPath + ' does not exist.';
79+
return Promise.reject(new SilentError(message));
80+
}
81+
}
82+
7283
let sslKey: string = null;
7384
let sslCert: string = null;
7485
if (serveTaskOptions.ssl) {
@@ -95,6 +106,7 @@ export default Task.extend({
95106
stats: statsConfig,
96107
inline: true,
97108
proxy: proxyConfig,
109+
setup: serverConfig,
98110
compress: serveTaskOptions.target === 'production',
99111
watchOptions: {
100112
poll: CliConfig.fromProject().config.defaults.poll

tests/e2e/tests/misc/static-server.ts

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { writeFile } from '../../utils/fs';
2+
import { request } from '../../utils/http';
3+
import { killAllProcesses, ng } from '../../utils/process';
4+
import { ngServe } from '../../utils/project';
5+
import { expectToFail } from '../../utils/utils';
6+
7+
8+
export default function() {
9+
// const app = express();
10+
const serverConfigFile = 'server.config.js';
11+
const serverConfig = `module.exports = function(app){
12+
app.get('/api/test', function(req, res){
13+
res.json({ status:'TEST_API_RETURN' });
14+
});
15+
};`;
16+
17+
return Promise.resolve()
18+
.then(() => writeFile(serverConfigFile, serverConfig))
19+
.then(() => ngServe('--server-config', serverConfigFile))
20+
.then(() => request('http://localhost:4200/api/test'))
21+
.then(body => {
22+
if (!body.match(/TEST_API_RETURN/)) {
23+
throw new Error('Response does not match expected value.');
24+
}
25+
})
26+
.then(() => killAllProcesses(), (err) => { killAllProcesses(); throw err; })
27+
28+
// A non-existing proxy file should error.
29+
.then(() => expectToFail(() => ng('serve', '--server-config', 'config.non-existent.js')));
30+
}

0 commit comments

Comments
 (0)