a Koa 2 project, in this project you can use typescript to finish your koa server.
The project is clean, just inject some base middleware in this.
You can use the typescript to development your koa project.
If you want to deploy the project, I recommend to use the pm2.
If you just want to run in dev env, I install the ts-node and nodemon in the project, you can use npm run dev
to make the koa start.
// install the pm2 in global
npm install -g pm2
pm2 install typescript
// install node_modules
npm install
// run in the devlopment env
npm run dev
// run in the production env by pm2
npm run prod
// stop the pm2
npm run prod-stop
This project use the standrad to lint the typescript file.
If you don't want to use eslint, you can do like this:
// package.json
-- "dev": "nodemon server/index.ts --exec 'npm run lint && ts-node'",
++ "dev": "nodemon server/index.ts",
If you want to change the lint config, you can editor the .eslintrc.js
.
.
|
| --- client // the website client file
|
| --- config // the project global config file
|
| --- public // the project public static resource file
|
| --- server // the koa 2 project file
| |
| | --- app.ts // main koa server file
| |
| | --- config // the koa 2 config file
| |
| | --- controllers // the koa 2 controllers file
| |
| | --- middlewares // the koa 2 middleware setting file
| |
| | --- routes // the koa 2 routes file
You can run the vue project by npm run dev
in client file when you finish the vue project init.
But the vue project listening the 8080
port, and koa listen the 3000
port.
Install the koa-cors
to rsolve the cross-domain.
npm i @koa/cors@2 -D
Use the middleware in koa
// server/app.ts
...
import * as cors from '@koa/cors'
const app = new Koa()
module.exports = app
if (process.env.NODE_ENV === 'development') app.use(cors())
...
Now you can use the koa api, when your vue project or angular project is development now.
first init the vue project in the client file, you can use the vue-cli to init the vue project
- install the vue-cli
npm i -g vue-cli
- init the project
vue init webpack
if you don't konw how to use vue-cli, you can see here.
- install the node package
npm install
- run the vue.js
npm run dev
- move to the root dir
cd ../
- build the vue prject
cd client
npm run build
- install the koa-connect-history-api-fallback middleware
npm i koa-connect-history-api-fallback -S
- use the middleware in koa and static the vue build file
// server/app.ts
...
import * as history from 'koa-connect-history-api-fallback'
import * as convert from 'koa-convert'
...
// router
// import './routes/index'
// koa-connect-history-api-fallback
app.use(convert(history()))
app.use(require('koa-static')(path.join(__dirname, '../client/dist')))
...
Now you can get the website in the 3000
port.
Tips:
-
the
koa-connect-history-api-fallback
must after then thekoa-router
middleware inapp.ts
. -
the example is in this project
vue.js
branch.
- use the angualr-cli to build the client file
// install the angular cli
npm i -g @angular/cli
// use the cli to create the client
ng new client
- run the angular project
ng serve --open
Now the angular project run in 4200
port, you can check the localhost:4200
.
- build the angualr project
cd client && npm run build && cd ../
- install the
koa-connect-history-api-fallback
middleware and uesd
npm i koa-connect-history-api-fallback -S
update the server/app.ts
file
// server/app.ts
...
import * as convert from 'koa-convert'
import * as history from 'koa-connect-history-api-fallback'
...
// router
// import './routes/index'
// koa-connect-history-api-fallback
app.use(convert(history()))
app.use(require('koa-static')(path.join(__dirname, '../client/dist')))
...
Tips:
-
the
koa-connect-history-api-fallback
must after then thekoa-router
middleware inapp.ts
. -
the example is in this project
angular.js
branch.