CODEWITHSUNDEEP
vue.js
Jerry
Jerry

Reputation: 424

vue: is it right to track dist files?

My Environment

When I develop vue project, I keep track of files in dist folder.

My laptop

I develop vue project -> npm(yarn) run build -> git add everthing in dist folder -> git commit -> push

Production server

git pull -> Everything is good to go (since I already built dist folder on my laptop).

I have URLs of production server and localhost server in my .env file

VUE_APP_PRODUCTION_API=https://myprodserver.com/
VUE_APP_LOCAL_API=http://localhost:3000/

When I use

vue-cli-service serve, it uses localhost server url.

vue-cli-service build, it uses production server url. (so URL is allocated in build-time, not run-time)

The Problem

But I came across a problem when I added a qa server.

Now, there are three envrionments

1. My laptop

2. qa server

3. production server

I found that vue project in qa server tries to talk to PRODUCION_API (since It pulled the dist folder for production server which I built on my laptop and committed).

What I tried

I created the .env.local in qa server and overwrote the VUE_APP_PRODUCTION_API

# qa server .env.local
VUE_APP_PRODUCTION_API=http://qaserver.com/

and installed npm, yarn

and build

it worked! But... the problem is it makes git status output dirty. when I git status

changes:
file removed: dist/file...
file removed: dist/file...
file removed: dist/file...
file removed: dist/file...

I know I can .gitignore dist folder, and build everytime when I git pull in each environment... but that would be bothersome. that would make me have to install npm, yarn, and install whole dependency in production server too. (It wasn't necessary before since I used to build on my laptop)

Question

  1. Do I have to build the project everytime just to change the base url?
  2. Was it right to keep track of dist folder from the fist place?
  3. Is there any Best-Practice you could share me?

Upvotes: 0

Views: 1552

Answers (1)

Valentin
Valentin

Reputation: 602

Ideally, you would want to deploy your project using a tool like Github Actions or Gitlab CI.

This would allow you to build your projects with the necessary environment variables for the given target environment.

In general, the dist files aren't included in version control, as each developer working on your project would have different versions of it and you would encounter merging conflicts really often.

Here's an example using Github Actions, deploying on Github Pages

Upvotes: 2

Related Questions