129 lines
3.7 KiB
Markdown
129 lines
3.7 KiB
Markdown
# Express Plugin
|
||
|
||
The Express plugin contains generators to add a new Express application to an Nx workspace.
|
||
|
||
## Adding the Express plugin
|
||
|
||
Adding the Express plugin to a workspace can be done with the following:
|
||
|
||
```shell script
|
||
#yarn
|
||
yarn add -D @nrwl/express
|
||
```
|
||
|
||
```shell script
|
||
#npm
|
||
npm install -D @nrwl/express
|
||
```
|
||
|
||
> Note: You can create new workspace that has Express and React set up by doing `npx create-nx-workspace@latest --preset=react-express`
|
||
|
||
## Applications
|
||
|
||
Generating new applications can be done with the following:
|
||
|
||
```shell script
|
||
nx generate @nrwl/express:application <express-app>
|
||
```
|
||
|
||
This creates the following app structure:
|
||
|
||
```treeview
|
||
my-org/
|
||
├── apps/
|
||
└── express-app/
|
||
├── jest.config.js
|
||
├── src/
|
||
│ ├── app/
|
||
│ ├── assets/
|
||
│ ├── environments/
|
||
│ │ ├── environment.prod.ts
|
||
│ │ └── environment.ts
|
||
│ └── main.ts
|
||
├── tsconfig.app.json
|
||
├── tsconfig.json
|
||
├── tsconfig.spec.json
|
||
└── tslint.json
|
||
```
|
||
|
||
The `main.ts` content should look similar to this:
|
||
|
||
```typescript
|
||
import * as express from 'express';
|
||
|
||
const app = express();
|
||
|
||
app.get('/api', (req, res) => {
|
||
res.send({ message: 'Welcome to express-app!' });
|
||
});
|
||
|
||
const port = process.env.port || 3333;
|
||
const server = app.listen(port, () => {
|
||
console.log(`Listening at http://localhost:${port}/api`);
|
||
});
|
||
server.on('error', console.error);
|
||
```
|
||
|
||
#### Application Proxies
|
||
|
||
Generating Express applications has an option to configure other projects in the workspace to proxy API requests. This can be done by passing the `--frontendProject` with the project name you wish to enable proxy support for.
|
||
|
||
```shell script
|
||
nx generate @nrwl/express:application <express-app> --frontendProject my-react-app
|
||
```
|
||
|
||
### Application commands
|
||
|
||
When a Express application is added to the workspace.json (or angular.json), the following architect commands are available for execution:
|
||
|
||
#### build
|
||
|
||
```shell script
|
||
nx build <express-app>
|
||
```
|
||
|
||
The build command will compile the application using Webpack. It supports a production configuration by building with the following command:
|
||
|
||
```shell script
|
||
nx build <express-app> --configuration=production
|
||
```
|
||
|
||
Additional configurations can be added in the workspace.json. Changing the `--configuration` flag with the new configuration name will run that config.
|
||
|
||
#### serve
|
||
|
||
```shell script
|
||
nx serve <express-app>
|
||
```
|
||
|
||
The serve command runs the `build` target, and executes the application.
|
||
|
||
By default, the serve command will run in watch mode. This allows code to be changed, and the Express application to be rebuilt automatically.
|
||
Express applications also have the `inspect` flag set, so you can attach your debugger to the running instance.
|
||
|
||
##### Debugging
|
||
|
||
Debugging is set to use a random port that is available on the system. The port can be changed by setting the port option in the `serve` architect in the workspace.json. Or by running the serve command with `--port <number>`.
|
||
|
||
For additional information on how to debug Node applications, see the [Node.js debugging getting started guide](https://expressjs.org/en/docs/guides/debugging-getting-started/#inspector-clients).
|
||
|
||
##### Waiting for other builds
|
||
|
||
Setting the `waitUntilTargets` option with an array of projects (with the following format: `"project:architect"`) will execute those commands before serving the Express application.
|
||
|
||
#### lint
|
||
|
||
The lint command will run linting within the scope of the Express app.
|
||
|
||
```shell script
|
||
nx lint <express-app>
|
||
```
|
||
|
||
#### test
|
||
|
||
Test will execute Jest tests within the scope of the Express app.
|
||
|
||
```shell script
|
||
nx test <express-app>
|
||
```
|