Hello friends. Today I will continue the series about Vuejs. Today I will introduce you to serve a VueJS application from a backend NestJS.
Create a Nest application
Install Nest CLI
1 2 | npm install -g @nestjs/cli |
Create a NestJS application
1 2 | nest new nest-with-vue |
Install more libraries
1 2 | cd nest-with-vue npm install |
Confirm that all works
First we will run the application (this will help us when changing the code nor need to restart the server).
1 2 | npm run start:dev |
Then initialize the port for the application:
1 2 | curl localhost:3000 |
So we have run our application already. Very simple, right.
Set static serve content
Need to install additional packages:
1 2 | npm install --save @nestjs/serve-static |
Use the package
In src / app.module.ts:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | import { Module } from '@nestjs/common'; import { AppController } from './app.controller'; import { AppService } from './app.service'; import { ServeStaticModule} from '@nestjs/serve-static'; // New import { join } from 'path'; // New @Module({ imports: [ ServeStaticModule.forRoot({ // New rootPath: join(__dirname, '..', 'client/dist'), // New }), // New ], controllers: [AppController], providers: [AppService], }) export class AppModule {} |
In src / main.ts:
1 2 3 4 5 6 7 8 9 10 | import { NestFactory } from '@nestjs/core'; import { AppModule } from './app.module'; async function bootstrap() { const app = await NestFactory.create(AppModule); app.setGlobalPrefix('api'); // New await app.listen(3000); } bootstrap(); |
Here we will move all endpoints into the /api
folder and then save the static contents into the ./client/dist
folder and check the changes on localhost:3000
Note that the Client
name here can be any name. Actually this is just the folder where we will put the Vue application.
Now we will check to see if after moving the endpoints everything worked.
We ran the previous port again.
1 2 | curl localhost:3000 |
Now you will get the error {"statusCode":500,"message":"Internal server error"}
You run the port with endpoint /api
:
1 2 | curl localhost:3000/api |
Everything will work again. Now we describe just creating a Vue application into the ./client/dist
folder.
Create the VueJS application
Install Vue CLI:
1 2 3 4 | npm install -g @vue/cli # Hoặc yarn global add @vue/cli |
Create the Vue application:
1 2 3 4 5 | npm install -g @vue/cli # Hoặc vue create client |
Build application:
1 2 3 | cd client npm run build |
Thus all static files will be added to ./client/dist
.
Test Nest has worked with the Vue app.
1 2 | curl localhost:3000 |
You will see a message:
1 2 | <span class="token doctype"><!DOCTYPE html></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> html</span> <span class="token attr-name">lang</span> <span class="token attr-value"><span class="token punctuation">=</span> en</span> <span class="token punctuation">></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> strong</span> <span class="token punctuation">></span></span> We're sorry but client doesn't work properly without JavaScript enabled. Please enable it to continue. <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> strong</span> <span class="token punctuation">></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> html</span> <span class="token punctuation">></span></span> |
Now open it up in your browser and it should work!
So I have introduced you the basic steps to Serve VueJS application with Nest .. If you have any questions, please leave a comment below.
Refer
https://medium.com/js-dojo/how-to-serve-vue-with-nest-f23f10b33e1