I'm new to node and deploying. I understand that every change I make on master branch I need to commit and push. My Heroku app doesn't update when doing so and I've worked out its because its serving the files from my /dist folder in the repo.
So i was wondering, whenever I change my code do I have to delete my dist folder and run "npm run build" again so my dist folder is up to date or?
You're not actually replacing the dist folder on every heroku deploy. You need to remove the existing dist folder on your heroku server. So for handling this you can use the heroku preinstall script hook. Your package.json file should look like this:
scripts: {
preinstall: "rm -rf /dist"
}
You can now run your script for deploying on heroku and it'll first remove the dist folder and then deploy a fresh build.
I don't know what your build process involves (you can post your package.json if you want) but you might not need to delete your dist folder, otherwise, yes. You build your code and then deploy it.
One way to automate this would be to set up a Continuous Delivery process. This would be a build server like Jenkins or a service like Semaphore CI that is triggered on a push, builds your code for you, and deploys it.
Edit: If you're using a vue-cli template like their webpack template you don't need to delete the dist directory, the build script handles that for you. #m-ketan's suggestion of using Heroku's build hooks is a good one but I think you might want to use postinstall and have it call npm run build. See https://devcenter.heroku.com/changelog-items/844
Related
I am trying to Buddy.works using their CI to upload my themes in in test, staging and production mode.
I have noticed when the files are compiled using Webpack that it is also uploading node_modules to the root folder.
It is taking an age to upload everything. Do I really need those files if the build is finished within Webpack?
Normally working on my project locally all node_modules have to be installed in order to use them. Do I need to include the node_modules in the cloud also?
The standard is to not push node_modules to the SCM(Git, SVN, Mercurial) because they take a lot of space. That's why we have package.json. So on a CI/CD tool like Jenkins, Circle CI or Travis you would specify the build to run npm install --production and it would take care of creating and downloading the necessary dependencies to the node_modules folder.
This makes the build faster too as the first step would be something like,
git clone <repo_url>
If you had pushed your node_modules folder it would take longer to clone due to the extra size.
Does this answer your question?
Currently I made a simple app with react, it works perfectly and I use react-scripts. I installed React by following the Facebook github page, and it written that "When you're ready to deploy to production, running npm run build will create an optimized build of your app in the build folder. ". After I press npm run build, a folder build created, but I do not know what to do with this folder. I tried some method like, move all folders except build and npm run, but it did not work. Anyone can explain me what is this folder "build" ? Thank you
npm run build builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
npm run build creates a build directory with a production build of your app. Set up your favourite HTTP server so that a visitor to your site is served index.html, and requests to static paths like /static/js/main..js are served with the contents of the /static/js/main..js file.
I'm using Rollup.
Also I don't commit npm_modules folder and public folder, where all generated files are. And I can't figure out how to build my app (I have webpack build command) after deploy and setup my server (it's already looking for public folder).
It seems me a bad idea to commit before upload. Maybe there are some gentle decisions... Any thoughts?
Forked from: How to deploy node that uses Webpack to heroku
I don't use Heroku, but according to the answers on the question this is forked from, it should be as simple as this:
"heroku-postbuild": "rollup -c"
I'm unsure how to deploy my web application to heroku where the actual web application is generated within a sub folder. I have the project tree:
app
assets
dist
server
// other stuff ....
now when I want to run my server & frontend, I do gulp. gulp creates a folder named build which contains all needed files for running the web app, so my file tree would become
app
assets
dist
server
build
// other stuff ....
Is there a way to initialize the heroku repository to only the folder build? Since my actual web app lies inside just that folder, it's probably easier for me to only have heroku think the build folder exists.
I currently have heroku setup with only heroku create inside the parent repo
I found a solution to my issue. What I decided to do was include my build folder into my repository (did not add much bloat, only like 50kb). Then, when I wanted to deploy to heroku I did:
git subtree split --prefix build -b deploy
git push heroku deploy:master
git branch -D deploy
this created a branch with only the build folder, pushed that to heroku (use -f if you need to overwrite previous commits), the deleted the deploy branch.
Worked like a charm!
I have a Node project with some front end that results in a ./build directory. How do I setup Heroku to understand that build is what it needs to operate and not my whole project?
Heroku gets all informations of the node.js app using the package.json that needs to be on the main path.Just configure your paths correctly in package.json and it should work fine.