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
Do I have to build the project everytime just to change the base url?
Was it right to keep track of dist folder from the fist place?
Is there any Best-Practice you could share me?
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
Related
Is it allowed to create local dbt deps repository so that "dbt deps" command should download libraries from local repository?
N.B: Our client is not interested to connect to external network.
Yes this is possible, provided that the repositories have already been locally cloned or copied.
dbt docs's page on Packages tells you exactly how to do this
Packages that you have stored locally can be installed by specifying the path to the project, like so:
packages:
- local: /opt/dbt/redshift # use a local path
Local packages should only be used for specific situations, for example, when testing local changes to a package.
Note: I think it is worth re-iterating the caveat given in the docs. You will now own downloading the cloning the correct versions of the packages along with the ongoing work of keeping the packages up-to-date.
As for how this works in practice. Consider the following example:
/Users/michelle/repos/my_dbt_project where my dbt project lives (that contains dbt_project.yml and packages.yml
/Users/michelle/repos/dbt_utils the location where I previously cloned the dbt-utils repo
In this example my packages.yml should look like
packages:
- local: /Users/michelle/repos/dbt_utils # use a local path
Please note that the external package does not live within my dbt project directory, but outside of it. While it should work to have it within the repo, this is not best practice. This external package development article goes even further in-depth.
I tried uploading my files to Github, but GitHub says it's too big.
I then uploaded the content of the dist folder after building for production.
This worked just fine, but it's not very useful.
What is the proper way to upload a Vue.js app to GitHub?
What you generate (binary files which can be big) should not be versioned/pushed to GitHub.
It is better to use a local plugin which will, on GitHub side, build, tag and publish a release associated to your project.
For instance: semantic-release/github.
You can combine that with a GitHub Action, which can take that release, and deploy it on a remote server of your choice (provided it is publicly accessible from GitHub): see for example "How to deploy your VueJS using Github Actions (on Firebase Hosting)" from John Kilonzi.
For your existing dist, you should delete it (from Git only, not your disk) and add it to your .gitignore:
cd /path/to/repo
git rm --cached dist
echo dist/>>.gitignore
git add .gitignore
git commit -m "Delete and ignore dist/"
git push
What happens if I add a node module( like if I decide to add an image cropper). How can the other contributers deal with that?
You need to add the declaration of that module in your project, not version the module itself. For instance, using Vue.use.
Also: I host the app on netlify. It builds the site straight from github. But it wont be able to build the site if gihub doesnt have the dist folder...
See "How to deploy your Vue app with Netlify in less than 2 min!" from Jean-Philippe Fong: Netlify itself will build the dist (from your GitHub project sources) and publish it.
You should add a .gitignore file to the root of your directory where you can ignore files and directories.
Most typical ones to ignore are the following:
node_modules
/dist
.env
.vscode
NPM donwloads a lot of files needed for the webpack/libraries. From what i understand, webpack generates a one single bundle file, that contains all code for script working. After that, when i finish building my app, do i need to keep all those jquery/react files and webpack itself? Or should i just delete them?
It's common practice to make a project portable/shareable by following these steps;
Create a package.json and ensure to capture all dependencies,devDependencies and/or peerDependencies.
Add/commit this package.json and package-lock.json files to your version control
Create a .gitignore file and add node_modules to it (in essence, this cuts out that baggage)
For production purpose (e.g. to be shared with client finished product), build the project (which often results into a small files, often within /build or dist). And then you can always push that build file to AWS or Heroku or the clients' servers.
What does the above help you achieve?
You can easily start the project using any machine, as long as you run npm install which reads from your package.json.
I was recently assigned a new project that uses Angular5 on frontend and Laravel on backend. I had no experience with Angular5 so I went through this entire tutorial without any issues. There is no backend and ng serve is used to serve the project. Only when I make updates to components/html/scss/etc files do I see changes to the served local UI - no changes to the local project UI are observed when I make changes to the main.js file within the dist folder after ng build, but changes made to the components/etc. are observed as updates in main.js after ng build. I was under the impression this is the expected behavior.
However, for my inherited project (which I put on my local machine via a simple git clone), the opposite is true. When I run locally, I use php artisan serve. All edits to blades are reflected in the served local project. However, for the "Angular-controlled" portion of the project, only when I make updates to the main.bundle.js file (without using ng build nor ng serve) within the dist folder do changes register in the served local UI - no changes are observed on the local project UI when I make edits to the components/html/etc files.
Can somebody please tell me what the heck I am missing here? What do I need to do to have edits to my local components/html/scss/etc. files reflected in the served local UI on the inherited project?
The inherited project was git cloned so this is how it was before I made any edits. I would imagine that development work is supposed to be done on components/etc. directly, not on .js files within the dist folder!
PS - No 404- or 500-level errors when inspecting the inherited project
In the project directory, updating npm using npm update and then running ng serve did the trick.
I have built a simple aurelia web page without a back end, and I am now interested in going into production. I used Aurelia-cli for bundling, hoping this would be simple, but I am not sure how to proceed. Which files should I upload to the server to have the site working? Thanks for the help.
In a nutshell:
au build --env prod
copy the index.html to your main deployment folder on your server
copy the /scripts folder to the same location.
we created a deployment script that:
runs the build
creates a build-directory with the current timestamp.
copies all assets into that directory (so that we can verify that we have all pieces together)
and then pushes the whole thing to production
replace the last step with your actual deployment method
au build --env prod
buildtarget=../build-$(date +%F-%T)
mkdir $buildtarget
cp -LRvip index.html scripts $buildtarget
ncftpput -R server /prod/path/ $buildtarget/*