Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mathieutu/vue-cli-plugin-express
Deploy your Vue application and add your own routes with 2 click !
https://github.com/mathieutu/vue-cli-plugin-express
Last synced: about 2 months ago
JSON representation
Deploy your Vue application and add your own routes with 2 click !
- Host: GitHub
- URL: https://github.com/mathieutu/vue-cli-plugin-express
- Owner: mathieutu
- License: mit
- Created: 2018-10-03T10:45:51.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T17:16:39.000Z (about 2 years ago)
- Last Synced: 2024-10-09T18:09:02.987Z (3 months ago)
- Language: JavaScript
- Homepage:
- Size: 902 KB
- Stars: 50
- Watchers: 4
- Forks: 13
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# vue-cli-plugin-express
[ ](https://www.npmjs.com/package/vue-cli-plugin-express)
[](https://github.com/vuejs/vue-cli)
**:rocket: Add an API in your Vue application in 2 minutes!**
This is a vue-cli 3.x plugin to add an Node Express server in your Vue project.
**:star: Features:**
- Included fully customizable Express Server:
- Just add your api routes into your project (with import/export support) without thinking to something else.
- Optional automatic fallback to the Vue app, to serve both the api and the application with only one command.
- Optional socket.io support.
- (soon) Included optional example routes and components.
## Table of contents
- [Getting started](#getting-started)
- [Usage](#usage)
- [Injected Commands](#injected-commands)
- [Configuration](#configuration)
- [Use your app in production](#use-your-app-in-production)
---
## Getting started
:warning: Make sure you have vue-cli 3.x.x:
```
vue --version
```
If you don't have a project created with vue-cli 3.x yet:
```
vue create my-new-app
```
Navigate to the newly created project folder and add the cli plugin:
```
cd my-new-app
vue add express
```
Soon:
*:information_source: An example `APIExample.vue` component will be added into your sources if you chose to include the examples.*
## Usage
To start your server for development purpose, use this commands:
```
yarn express
```
The server will be automatically restarted when a change is detected.
You just then have to start the app:
```
yarn serve
```
To run the server only once for production use, run:
```
yarn express:run
```
**Updating `vue-cli-plugin-express` will update the Express server service :+1:**
## Injected Commands
- **`vue-cli-service express:watch`**
Run the Express server with info from `./srv` and watch the files to restart itself automatically.
- **`vue-cli-service express:run`**
Run the Express server with info from `./srv` once.
## Configuration
The Express Server can be configured via the `pluginOptions` in `vue.config.js`:
```js
module.exports = {
// Other options...
pluginOptions: {
// Express-related options
express: {
shouldServeApp: true,
serverDir: './srv',
},
},
},
}
```
## Use your app in production
Move `@vue/cli-service` from `devDependencies`to `dependencies`.
Execute the following commands:
```bash
yarn build
yarn express:run
```
For most of cloud hosting services, you can add a `start` command that will be triggered automatically:
```json
{
"scripts": {
"start": "yarn express:run"
}
}
```