Search code examples
laravelgitvue.jsdeploymentnode-modules

app js getting merge conflict when merging branch with master (laravel+vue)


I am developing an application using Laravel and vueJs. During build up the application, the npm run watch command watching all relevant files for changes and recompiling app.js when it detects a change. First time, I created a repository (suppose in github/gitlab/bitbucket etc.) with a master branch and two different branches.

Now, the problem is when we're going to push to the branch or merge with master branch, it's getting so many conflicts in public/js/app.js. I guess, I know the reason. This is because of, during build the application with npm run watch, every changes recompiling the app.js. So, old public/js/app.js in the repository will get the merge conflict in new public/js/app.js. If I ignore the app.js then how the changes impact to the app when multiple developers work at the same time. In this circumstances, what should be the solution when the application is developing by two or more developers and using github,gitlab,gitbucket etc. to merge the codes. Would someone suggest me the correct way please!


Solution

  • Ignore compiled files in your .gitignore as there's no reason to push them to your repository unless you don't have nodejs in your server

    .gitignore:

    /public/js/app.js
    

    Then run

    npm install
    npm run prod
    

    In your server when you're ready to deploy

    Steps to correct

    rm public/js/app.js
    echo "/public/js/app.js" >> .gitignore
    git commit -m "ignore compiled asset"
    git push
    npm run watch
    

    I usually ignore all compiled assets in public directory

    /public/js/*
    /public/css/*
    /public/fonts
    

    Because it's cleaner and faster to push (since the compiled assets are huge in size +1MB)

    It's better to have all dependencies in node_modules and write Javascript as ES6 modules in resources/js or formerly resources/assets/js (same thing for CSS & SCSS)