I have a repo with 2 different build/start commands: one for the app itself, and another to run Storybook. Yes, I know Storybook should be on its own repo but for now we have everything in a single repo.
How can I build 2 pipelines, one that starts with npm build and npm start, and another pipeline that uses npm run build-storybook and npm run storybook?
I can't use a Procfile since they are both on the main branch.
I was working on this exact issue. Unfortunately I was unable to find a solution because Heroku automatically runs the build command on deployment.
I pivoted to using Chromatic because it has built in Storybook deployments.
Related
I have an app initiated using Create React App, so npm run build runs react-scripts build. I recently installed prettier and so added a .eslintrc.json file to the project root to load the prettier plugin. npm run build works as expected locally, but, when deploying the app to Heroku, npm run build tries to run ESLint and fails because the plugins are devDependencies rather than dependencies.
Failed to load plugin 'prettier' declared in '.eslintrc.json': Cannot find module 'eslint-plugin-prettier'
From prior wrangling with a similar issue, I know that I can set NPM_CONFIG_PRODUCTION=false in Heroku so that it will install devDependencies, which actually does resolve the deployment issue. Nevertheless, I'm curious to learn if there's another solution that doesn't require setting NPM_CONFIG_PRODUCTION=false.
Is it possible to prevent npm run build in this scenario from running ESLint altogether or to prevent it from trying to access the plugins specified in .eslintrc.json? I acknowledge that adding .eslintrc.json to .gitignore is one solution, but I want the ESLint configuration in my repo.
you can run "npm run eject" to generate webpack configuration files, and then modify "webpack.config.js"，delete the eslint configuration
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.
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
When using the node.js build-pack in heroku, the postinstall hook in package.json can be used to run a custom build script
But what if I am not using the node build-pack? For example, if I am using the apt build-pack, how do I specify a custom build script? Do I still need to create a package.json file just to be able to have this capability?
I had a similar problem, in that I had two buildpacks on my application, one of which was nodejs. My package.json build script was getting run before my python dependencies had been installed, and was failing (I think the same thing would happen with postinstall). The solution was to reverse the buildpack order, and put the python one before the nodejs one, so the build script would have all necessary dependencies.
That same solution could apply here as well, using something like heroku-buildpack-shell. Just put that buildpack last, and stick your build script in .heroku/run.sh.
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.