How do I make changes to the v-slider component and test it in my app? - vuetify.js

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

Related

Yarn & Monorepo: Prevent using local packages

I have a yarn/lerna monorepo with multiple packages that depend on each other. If I add packageA as a dependency to packageB and execute yarn install I see that node_modules/packageA is actually a symlink to packages/packageA instead of the published version of that package.
This creates problems on CI if packageB is build before packageA - the build fails because node_modules/packageA just points to the bare sources, without the build products (because packageA has not yet been built).
How can I force yarn to always download the published version of packageA?
yarn --version: 1.22.10
sidenote: If I wanted to use a local version of packageA instead, I would use yarn link or a local path instead of a version in package.json. Why is yarn defaulting to this behaviour?
One options is: "focussed workspaces" - see the guide here.
In my case, I added a file packages/packageB/.yarnrc that specifies to always use the --focus argument for yarn install:
--install.focus true
This will make sure that packageB has a copy of the published packageA in it's own node_modules folder.
However: This only works for one package at a time.
You can just build packages in order of dependencies. So in your case it'd be something like this in your CI (assuming there is a script entry called "build" in package.json of the packages):
yarn workspace packageA run build
yarn workspace packageB run build
This way you control the order of builds,they complete successfully, and you don't have to force using published package.

aws "serverless invoke local" fails to run when node_modules are on a parent folder

I have a serverless aws app within a context of many other ones. All of the node_modules are shared in a parent folder, and it works fine with deploys and invoke functions, not with invoke local. This is my structure:
main/
- node_modules
- serverless
- app1
- app2
- serverless.yml
serverless.yml file settings:
package:
include:
- ../../node_modules/**
The problem is whenever I try to run sls invoke local I got a error messages due to package not found. So, the workaround is to npm install --save every package that is outside of my path.
If you have found a solution, not a workaround (like mine) please share :).
It was so obvious I wanted to delete my question, but I'll leave the answer here>
just go to the folder that contains your node_modules, you'll find a package.json there, and run npm install --save for the new packages you need.
cd ../../
npm install --save missing_packages
your serverless.yml include should consider it when running local with no issues.
Violá!

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!
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.

How do I install vuetify directly from github?

When I try with
npm install vuetifyjs/vuetify#v1.5.2
I get "Cannot find package".
UPDATE:
There is a packages folder under which there is a vuetify directory.
I tried npm installing that folder. Everything appeared to go well until I started the dev server.
Now in the console log I see:
[Vuetify] Multiple instances of Vue detected
Seems to be related to https://github.com/vuetifyjs/vuetify/issues/4068 but I cannot tell what the solution is at this point.
I had the same issue to use my own version of Vuetify, waiting for my pull request being accepted.
Here what I did:
I build the vuetify project with my fix.
yarn
yarn build
Then I took the content of 'packages/vuetify' and put it in a new git repository. I remove the .gitignore to be able to commit built files (/es5, /lib, /lib-temp, /dist)
Finally I add this git repository to my project to replace my vuetify version:
npm install git+https://gitlab.com/GITLABUSERNAME/REPOSITORYNAME.git
Looking at the package.json file, the package doesn't have a name property, which it would need to have for you to be able to install it from GitHub.
So the short answer is that you can't install vuetify directly from GitHub via npm.
However, you can install it directly from npm:
npm install vuetify#1.5.2
You can't install vuetify directly from GitHub but you can edit code in 1 component 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

Build React Native project after pulling from GitHub

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

Resources