Skip to content
Open
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 35 additions & 27 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

**: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.
This is a vue-cli 3.x plugin to add a Node Express server to your Vue project.

<br>

Expand All @@ -15,11 +15,11 @@ 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.
- Fully customizable Express Server:
- Just add your api routes into your project (with import/export support)
- Optional automatic fallback to the Vue app. Serve both the api and the application with Express
- Optional socket.io support
- :soon: Example routes and components

## Table of contents

Expand All @@ -35,46 +35,53 @@ This is a vue-cli 3.x plugin to add an Node Express server in your Vue project.

:warning: Make sure you have vue-cli 3.x.x:

```
```sh
vue --version
```

If you don't have a project created with vue-cli 3.x yet:
If you have not installed vue-cli 3, first follow the install instructions here: [https://cli.vuejs.org/](https://cli.vuejs.org/)

```
Generate a project using vue-cli 3

```sh
vue create my-new-app
```

Navigate to the newly created project folder and add the cli plugin:
Navigate to the newly created project folder and add this plugin. It is good practice to commit your changes prior to installing a new plugin.

```
```sh
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.*

:soon: _:information_source: An example `APIExample.vue` component will be added should you choose to include examples when installing the plugin._

## Usage

To start your server for development purpose, use this commands:
To start your server for development, run:

```
```sh
yarn express
```

The server will be automatically restarted when a change is detected.
The server will watch for file changes and automatically restart.

You just then have to start the app:
Then you just have to start the web app:

```
```sh
yarn serve
```

To run the server only once for production use, run:
```
yarn express:run
Alternatively you can serve the web app and api together from express by setting the plugin option, `shouldServeApp` to `true`. See the [Configuration](#configuration) section below for further details. You will also need to tell Express where to serve your web application by adding the following to `./srv/index.js`;

```js
var router = express.Router();
router.use(express.static("./dist"));
app.use("/", router);
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All the idea of this package is to avoid that (also, this will not work with vue-router)! shouldServeApp to true (chich is the default) is sufficient to serve properly the app.

Could you remove this part please?

Copy link
Author

@anguspalmer anguspalmer Jul 31, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added this as I found it necessary to serve my front-end code. I have also got vue-router working with it.
In my project, shouldServeApp is set to true but when I run yarn express it tells me no routes available and the server isn't serving anything on *localhost:3000*
I've tried this a few times with a fresh project and only the express plugin added but could not make it work.
I've now looked closer at your server.js file and realise the vue app is only served when in production mode. I'll update the documentation to show that as it tripped me up.

On another subject, I was going to create a PR to allow setting the Express port from an environment variable $PORT. Or is there an existing way to do this?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have removed the code example

```

Where `./dist` is the location of your built web application.

**Updating `vue-cli-plugin-express` will update the Express server service :+1:**

## Injected Commands
Expand Down Expand Up @@ -105,21 +112,22 @@ module.exports = {
}
```

## Use your app in production
### Production

Move `@vue/cli-service` from `devDependencies`to `dependencies`.
For production use you need to move `@vue/cli-service` from `devDependencies`to `dependencies`.
Then build your app and run the server;

Execute the following commands:
```bash
```sh
yarn build
yarn express:run
```

For most of cloud hosting services, you can add a `start` command that will be triggered automatically:
Most cloud hosting services will expect a npm `start` script to run your application. It is recommended you add the following to your `package.json`:

```json
{
"scripts": {
"start": "yarn express:run"
"start": "yarn express:run"
}
}
```