Nuxt.js
- Components with Typescript
- Express server with Typescript
- Javascript support installed
- Vetur extension
- vue syntax highlighting
- prettier with "Format on Save" option
# install dependencies
$ npm install
# serve with hot reload at localhost:3000
$ npm run dev
# build for production and launch server
$ npm run build
$ npm run start
# generate static project
$ npm run generateFor detailed explanation on how things work, check out Nuxt.js docs.
Running frontend and backend tests are separated with following scripts.
# run frontend tests
$ npm run test:client
# run frontend tests in watch mode
$ npm run test:client:watch
# run backend tests
$ npm run test:server
# run backend tests in watch mode
$ npm run test:server:watchBuild docker image from current directory.
$ docker build -t nuxt_typescript_app .Now run the docker image and expose local port 3000.
$ docker run -it -p 3000:3000 nuxt_typescript_appThe application should be accessible at http://0.0.0.0:3000
Try to reach baceknd API at http://0.0.0.0:3000/api/users/
This is a Vue.extend({}) syntax and in my opinion provides a bit better Typescript safety-net.
It also comes from the well-known Options API.
This is a class-based component with annotations and native getter class methods.
However, the big limitation is that when declaring a class variable for mutating state (OptionAPI data() { ... }), you always have to initialize it with some value. You cannot leave it uninitialized and also you can't assign undefined as initialization value, because it will NOT be reactive (Vue will not work as expected).
Also, if you want to initialize your state based on props, you have to use the data() { ... } function anyway.
To understand how things work in production, we have to look at two components of the app:
- NuxtJS part
- ExpressJS backend API
NuxtJS is compiled into .nuxt/dist/ directory which contains client/ and server/ directory.
In the client/ directory, you will find Javascript bundles compiled by Webpack, separated into several chunks. You will also find statics assets like fonts/.
The server directory contains a server.js file which basically handles serving of static files and other Nuxt-related middleware functions. This is wired by app.use(nuxt.render) in original <root>server/index.ts file.
The Express API implemented in <root>/server/ directory is compiled by Typescript compiler and saved into <root>/server-dist/ folder.
If you look at start script in package.json file, you will see the following node server-dist/index.js.
That means that in production, there is a node server running a compiled version of original server/index.ts, but now it's compiled to server-dist/index.js.