[Nodejs] Express, Vue + (heroku)

Dongmin Jang
Feb 28, 2018 · 4 min read

Let’s deploy Express server including vuejs.

dev-environment : vue-cli 3 beta.2 , express 4.16.0

Directory

— app

….| — express-app

….| — vue-app

Install

  1. use express-generator (http://expressjs.com/en/starter/generator.html)
sudo npm install express-generator -g
express --view=pug app_name
npm start
npm install -g @vue/cli
vue create vue-app

There are 2 options.

You choose default option, will be simple dev-env including bable, eslint.

If you choose manually option, you will select some like blow.

I don’t need typescript
css
eslint + formatter
lint
unit test
e2e test
config files
save?

move to vue-app

complete install

type “yarn serve”

enter “localhost:8080”

localhost:8080

It’s not over yet.

Do you want vue-router history mode?

app/vue-app/src/router.js

import Vue from "vue";

~/app/express-app > npm install — save connect-history-api-fallback

app/express-app/app.js

var index = require('./routes/index');

finish set router history mode.

We have to build vue-app.

Express will use vue-app build files.

~/app/vue-app > yarn build --dest ../express-app/public

~/app/express-app >DEBUG=myapp:* npm start

enter “localhost:3000”

It’s express web server using vue.

localhost:3000

finish…??

** If you set vue-cli pwa usging vue-cli 3 beta.1, there is a error. but, it already solved. beta.2 is ok.

I will deploy on heroku using github.

Let’s make github repository.

make github repo

Copy your repo url

Set your local git.

Push your work to remote branch.

ignore node_modules/

You could see files on github repo.

Make heroku.

click create app

Move to deloy tap. and type your github repo name.

click search

Click connet.

Click ‘Enable Automatic Deploys’.

Ok.. finish??? enter your heroku app url.

oh my god!

Let’s push again.. It will be auto deploy.

second commit

Did auto deploy!

go your heroku app url.

https://express-app-heroku.herokuapp.com/

Finish!

Dongmin Jang

Written by

Slow starter..

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade