I use vue.js + vue-cli + webpack to build my applications. During development I will run npm run dev to have webpack continuously watch my sources, compile everything, and reload the browser. To create production build, I can simply run npm run build. I would like to do this in a way that when I make a git commit, if my sources have changed, the build is created automatically.
My current approach is to simply use git pre and post commit hooks to automatically run npm run build and add the built files to the commit. This has the following downsides:
Even if other parts of the repo are changed, I re-run the build process for the Vue app, and it takes a very long time.
It makes resolving merge conflicts nearly impossible.
It creates a lot of cruft in the repo, ballooning its size
Typically I use a Vue.js frontend with a Django backend in the same repo, and deploy to Heroku or similar via a git push. What other methods are out there for accomplishing this task that don't have the above downsides?
Write a script in the package.json scripts section with something like
build && git commit -m "Build commit"
Related
I have been running into Out Of Memory errors with typescript-eslint in a monorepo with ~20 TypeScript projects. This is a known issue and one of the mitigations is to enable single run detection with the parserOptions.allowAutomaticSingleRunInference = true option. This doesn't appear to ever trigger in a yarn managed repository though. Looking at the source, will this ever work? It seems like because yarn runs in a /tmp directory it will never match the file path to detect single run mode:
$ yarn exec which eslint
/tmp/xfs-3826b2c0/eslint
I have a React Native app hosted on Microsoft App center. The builds (both iOS and android) are failing because of yarn 1.19 (error Incorrect integrity when fetching from the cache)
I tried to remove the package-lock.json but it didn't help.
I would like to downgrade yarn or execute the cache clean command but don't know where to execute it.
I have installed the appcenter cli version 2.2.1 and successfully connected to it.
Where could I execute yarn cache clean for example?
I've read I could also create a script but I have no idea where to place it and how it should look like. Should it be both in the ios and android directory? Or in the root? Thank you
I actually noticed that I had a yarn.lock back from the initial commit, even though we are using npm in the team.
In the build logs, there is this line:
/bin/sh -c if [ -f yarn.lock ]; then { yarn install && yarn list --depth=0; } else npm install; fi
So I deleted the yarn.lock file and now it builds successfully using npm!
Not sure whether you build your React app with Azure Devops pipeline. If yes, you can use Command line task to achieve the things you want to do.
If the agent you used is hosted agent during the build, since each build will use a completely new VM, you need to install the AppCenter cli once per build.
Use follow command to install the AppCenter cli:
sudo npm install -g appcenter-cli
Then logging in it:
appcenter login --token {Token}
Here, you need first generate the token with this doc described: Go and login to https://appcenter.ms/ -> Click Self Avatar -> Choose Account Settings -> Click on API Tokens -> Click New API token then select the corresponding the scope for this token.
Copy and use it in this pipeline task. Note: Recommend you store
this token with secret variable for security.
Now, you can execute the clean command: yarn cache clean.
Where to place it and how it should look like?
According to your description, you need place this command line task into the first step, then it could clean the Yarn cache firstly.
Also, because of the image configuration that the hosted agent is using, its installed node.js version is 6.7.0, this does not match the runtime environment for AppCenter cli. You need also run Node.js tool installer task to install node.js v10.0.0.
All of them should look like this:
Should it be both in the ios and android directory?
As I mentioned previously, for Hosted agent, each build will use a completely new VM. So yes, you must execute these two steps firstly in every build.
If what you used is your private agent, since you have installed the AppCenter cli locally, the agent will automatically call the local configuration when running the command line task. At this time, you just need to skip the install command in the command task:
We fixed it by adding a "yarn cache clean" in appcenter-post-clone.sh, you can add this shell script in root of project.
See this docs for details.
I just recently started using gitlab CI to automate some build/deploy steps. It works perfectly to build docker images etc, but I was wondering if it's possible to create a folder in the repository during a build step? For example I'm now making an npm utility package, but I'm just importing it in my other projects via a private gitlab repo (using deploy token), but the code of the util package is written in es6 and needs to be transpiled to commonJS to be used in the other packages. Manually I can run npm run build and it will output a dist folder with the transpiled code.
I was trying (and researching) if it's possible to automate this build process using .gitlab-ci but so far I couldn't find anything.
Anyone know how I can achieve this and/or if this is possible?
Thanks in advance!
Not sure if I got your question correctly, so add more details if not.
When your CI build creates new folders or files, they are written to the task runner's file system (no surprise here, I assume).
If you want to access these files from Gitlab's web UI you can define them as artifacts in your build job (see https://docs.gitlab.com/ee/user/project/pipelines/job_artifacts.html)
Your build job would look something like that (pseudo code written by memory, not tested on Gitlab):
build:
script:
- npm run build
artifacts:
paths:
- dist/
expire_in: 1 week
UPDATE If you want to upload the build artifact to an NPM registry, you could just build and push together.
build:
script:
- npm run build
- npm publish <PARAMETERS>
Is there a way that I can configure hooks to run a set of commands before a release is committed to a version when using Git Flow in SourceTree? I want to be able to make sure that when the last commit before a release is committed that npm run prod is ran to compile my Webpack assets instead leaving the results of npm run dev.
The best way I have found to deal with this is not git hooks but to actually run git flow release start #.#.# then npm run production followed by the commit and git flow release finish '#.#.#'. This also makes it so that I can verify the contents of the minified files work in the website before I release.
My project references mocha, phantomjs, etc, which takes a lot of time to download during npm install. This is not a problem in my local machine because I only download them once and can use them forever unless I decide to manually upgrade them.
However, in my CI machine, my jenkins server need to download them every time that I did a git commit and git push to do the testing and deploy.
So can I just speed up that process by set the npm not to download these slow packages from the remote server? Rather, install them from local cache or not to install them if I installed them globally?
Anyone knows how to configure that?
I found some packages that might be helpful
npm-install-changed will run npm install only if the contents of package.json's devDependencies and dependencies were changed, note that it assumes that node_modules persists across different builds which might not be helpful if your CI server always start from scratch
npm-install-cache runs npm install and then copies your current node_modules folder (to somewhere in \tmp), if you call the script again it will verify any changes to package.json (instead of changes done on devDependencies or dependencies), if it didn't change then it will copy the node_modules folder stored in \tmp, the only limitation I see is that it's not cross platform and that the cache folder is \tmp which is erased on reboot (or maybe even when a is process finished!)
The second package might not work as it is but it seems like a good place to start :)
You can specify all of the packages you want to use locally in devDependencies in package.json, and then running npm install -d will install those instead of the main dependencies.