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!
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) to have all dependencies in node_modules and write Javascript as ES6 modules in resources/js or formerly resources/assets/js and same for SASS and CSS
You shouldn't put the compiled files in git, remove the app.js in your public directory from your git repository. Your friend just has to run npm run prod on his machine to get an updated app.js.
Related
I tried editing inside node_modules but the files are taken from dist and src seems to be ignored.
I tried npm run build to see if I can push my changes to dist but that doesn't work either as other dependencies seem to be missing.
UPDATE:
I followed the instructions about set up dev env in the Contributing section of the docs.
Made the changes and did yarn and yarn build
But the dist folder is identical to the one without my changes
What gives?
Instructions in the set up dev env in the Contributing section work.
After running "yarn build" in the cloned repository folder, you can copy the contents of the dist folder under packages/vuetify to the dist folder under node_modules/vuetify of the app being developed and your changes can be tested.
You can also do npm run build inside packages/vuetify for subsequent changes.
You can edit code in node_modules/vuetify/lib/components/VSlider/VSlider.js
Then, you install patch-package and execute path package vuetify
Delete node modules and execute yarn to create new node modules
Last, yarn serve, you see your code is work
https://www.npmjs.com/package/patch-package
node_modules folder is quite large in term of size. I wonder if we can delete it after Laravel Mix compile everything? Sure, I tried it before (install jquery) and then delete node_modules folder after Laravel Mix compiled everything. My jquery code still running and there's no error at all. So is it okay?
yes, you can remove it after run:
npm run production
after run this command all necessary codes will save in app.js
and when need node_modules you can download them again with :
npm install
You should never commit your node_modules folder to git. That would take forever. Just commit package.json and package-lock.json.
However, you wouldn't want to have to re-install them everytime you build your code. I checked a large project and the total size is 310 M. What situation do you have where you can't keep that in place?
To directly answer your question, Laravel will never run code from the node_modules folder, all of the code used from there is compiled into app.js, so it is safe to delete if you had to.
I have been using npm for a personal project and just recently stumbled across yarn. Would there be any harm or "intended side effects" to switching to yarn's package manager in the same project where I had been using npm?
Although a few commenters here say its ok to mix both yarn and npm on the same project, after using yarn and npm and then yarn again, this is what yarn has to say about it:
warning package-lock.json found. Your project contains lock files generated by tools
other than Yarn. It is advised not to mix package managers in order to avoid resolution
inconsistencies caused by unsynchronized lock files. To clear this warning, remove
package-lock.json.
Since to me it is not any harm to using both them into one project.
I use npm and yarn (50/50) in dev environment.
But on ci/di i use only yarn because it is faster, and i reduce build minutes thanks yarn.
Also they both create different .lock file names.
Nobody told about the lock files.
Imagine you use yarn on dev environment, and yarn on your build/production servers. When you install a package using yarn, and your project works on your computer, you probably would want to keep it working on a production environment (your server).
That being sad, you would commit you yarn.lock file, that "saves" the exact versions of each package you have, when the project ran on your computer.
On your buid/production server you should call yarn install, but asking to keep all the same versions with --frozen-lockfile parameter. Some even say "yarn install --frozen-lockfile should be the default behavior", and I agree.
Then... another dev jump in the project you are working and install a package using npm (other than yarn). That new package will not be included in your yarn.lock file, but, a new package-json.lock file would be created, telling the exact packages versions it is using.
When that commit arrives on your build/production server, it will crash, fail, because that new package doesn't exist on yarn.lock file. Someone would need to pull that changes, call a yarn to install the dependences and update the lock file with the new package dependences, and push it again to the repo.
A quick point about using the lock file or not. If you call a 'yarn install' on your build/production server some weeks after the last install on your machine, the server would have many other new versions than your last "stable" version. It already happened to me many times.
I published recently the package-locks-checks, which help ensure you have not just one lock file but also locked each package version on your project.
There will be a point that one or both will no longer work and your project will be stuck at only using the existing lock file. Meaning, the issue probably will involve installation fails if you opt to reinstall without a lock file. And that also means failure to create a new lock file, so you are stuck with the existing one that you are trying to get rid off in the first place. We are actually encountering this issue in one of our projects. Because it is so big, no one tries to fix the issue and just rely on the existing lock file.
So, even if we say it's a rare case that it won't cause harm. Mixing npm and yarn should be avoided.
Here https://classic.yarnpkg.com/en/docs/migrating-from-npm/ we may find a confirmation that Yarn's resolution algorithm is compatible with NPM resolution algorithm.
Inside a npm project (with package.json) if you run yarn it will read your node_modules folder (using the resolution algorithm) and create a yarn.lock file with your project's locked dependency tree.
Based on that I assume that they are compatible inside the same project.
Update 30/04/2021
My original reply refers to yarn 1 (classic), although I've just created a React app with create-react-app tool and it creates the project's repository with package.json + yarn.lock by default. Again, another demonstration that it's fine (even with the warning mentioned by Dave Pile).
At the end of the day this is a matter of putting both together to work and checking yourself...
Plus you get a warning from yarn as Dave Pile said because we have to push *-lock.json files changes you have to consider using npm version >= 7 to make sure whenever you install packages by npm it will update your yarn-lock.json file too.
Because whenever you install the packages either by npm or yarn depends on what you have chosen for updating a dependency in the package.json (Using tilde ( ~ ) which gives you bug fix releases and caret ( ^ ) gives you backward-compatible new functionality) it will update you.lock file and since you have to push it might happen that you have different version of lock files.
My friend initialized a GitHub repo after initializing React Native in a certain directory. After I pull his files into a directory and initialize a local repository on my computer and run the XCode project, there seem to be a lot of missing files and the build fails. There's probably something I need to do which is taken care of when setting up react native in the "react-native init AwesomeProject" step, but I'm not trying to set up a new project. Instead, I want to keep the files he's already developed, but set up the React Native "environment"..how would I go about doing this?
You need to install the dependencies through npm. Just enter the following command in the root directory of your project:
npm i
I have created one application using NodeJS, Angular and Express which I want to run at Heroku. Now, Im using Grunt to build the code that are placed in the dist folder and is ready to be deployed and run on Heroku. This would be done by pushing the dist folder in the Heroku git repo.
Now, should i push my source code in Heroku git as well?
If so, how should I seperate it from dist-folder repository? For instance, I dont want Heroku to run npm install each time i push changes to remote repo. And dist folder should not be part of the source code folder in the repository since it is auto generated.
Using a git repository is the only way to push changes to heroku. So yes it is mandatory. Having said that here is what they have to say about it.
Heroku provides the git service primarily for deployment, and the ability to clone from it is offered as a convenience. We strongly recommend you store your code in another git repository such as GitHub and treat that as canonical.
Again there is no way to stop them from doing an npm install on each push. Here is a quote from their getting started guide
Heroku recognizes an app as Node.js by the existence of a package.json. Even if your app has no dependencies, you should still create a package.json that declares a name, version, and empty dependencies in order that it appear as a Node app.
But I suppose that you could download all the dependencies of your app locally, not specify in package.json, push it along with rest of your application and you might trick heroku into thinking that there are no dependencies. Have not tried it myself though.
If you don't want dist folder to be a part of push simply gitignore it.