CODEWITHSUNDEEP
vue.jsdev-to-production
francesco
francesco

Reputation: 53

How to run production build in VueJs?

I have worked to a VueJs project locally. Now I have to upload it on a VM of my university and it will become public. I think I should not upload the entire directory but only the 'dist' directory that I created with the command:

npm run build

First question: Is it correct?

Second question: How do I run the server now? For local's test I used to run it with the command:

npm run serve

but I think now I should use some other commands.

Thank you for help.

Upvotes: 2

Views: 9149

Answers (3)

Gblend
Gblend

Reputation: 11

  1. The command npm run build is correct for preparing the project for deployment.

  2. You don't need to run the command npm run serve like you do on local.

What you will need for deployment after running the command npm run build are:

dist folder and index.html file.

You could deploy your project to any hosting provider you choose.

I will use aws s3 as example for a static application (The process is almost the same in other platforms).

  1. Login to aws

  2. Select s3

  3. Create a new bucket (Give it a preferred name and select region)

  4. Enable the option for Static Website Hosting on the bucket you just created. The fileds for Index Document and Error Document should be set to index.html

  5. Set Bucket Permission (Add Bucket Policy)

Paste this into the bucket policy editor and save. Change your-bucketName to the created bucket name

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::your-bucketName/*"
            ]
        }
    ]
}

  1. Upload the files (build.js in the dist folder and index.js)

    1. Click on your bucket name
    2. Select upload at the top-menu
    3. Upload the files indicated above

  2. Create a folder with name as dist inside your bucket and move the build.js inside.

  3. Click on All Buckets to go back. Select Properties of your deployed bucket at the top-right menu and click on Endpoint to lunch your hosted site.

Upvotes: 0

Mahamudul Hasan
Mahamudul Hasan

Reputation: 2823

just simply

npm run build

Copy index.html and /dist/ folder into your website root directory. Done.

Upvotes: 0

Danizavtz
Danizavtz

Reputation: 3270

Answer for questions:

  1. Yes. It is correct.

  2. Usually, you will need to serve the dist folder in a web server. Like nginx or apache.

It will work serving your index.html, inside /dist folder generated in the build step of your vuejs application.

Obs.: you should not serve your application in production with npm run serve as it is a development server monothreaded.

Upvotes: 4

Related Questions