Install Serve VueJs with Nest

Tram Ho

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

Create a NestJS application

Install more libraries

Confirm that all works

First we will run the application (this will help us when changing the code nor need to restart the server).

Then initialize the port for the application:

So we have run our application already. Very simple, right.

Set static serve content

Need to install additional packages:

Use the package

In src / app.module.ts:

In src / main.ts:

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.

Now you will get the error {"statusCode":500,"message":"Internal server error"} You run the port with endpoint /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:

Create the Vue application:

Build application:

Thus all static files will be added to ./client/dist .

Test Nest has worked with the Vue app.

You will see a message:

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.


Share the news now

Source : Viblo