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"
Related
I recently used "heroku run" and looked around inside my package.json nodejs app, the slug is NOT minified in /node_modules . I am using the standard "heroku/nodejs" buildpack. Looking around, has nobody ever minified their node apps? While I could write a postbuild shell script to run terser on the whole package tree, why isn't this done automatically by heroku and google says nobody does it?
I am fairly new to Next js and its deployment process. I have recently converted one of my react js projects to Next js in order to advantage of the server-side rendering feature Next js offers. Now comes the deployment time, I figured out the Next build won't deploy without the node_modules folder present in the server. I use getServerSideProps in my pages and build with "build": "next build" command in package.json. The problem is my node_modules folder is close to 300MB (.next build adds about another 10MB) and I don't think it is the best practice to accompany this much weight with each deployment (I intend to have different instances of this build deployed, therefore 310MB X number of instances) in the server.
Am I doing something wrong here or is this the only way to accomplish this? I appreciate any answers. Thanks...
Update (11/14/22):
The previously mentioned "output standalone" feature is no longer experimental:
// next.config.js
module.exports = {
output: 'standalone',
}
Previous answer:
The latest Next.js documentation has a good example about how to create a standalone build with an excellent example of how to accomplish it with docker. As of now, the feature is experimental.
// next.config.js
module.exports = {
experimental: {
outputStandalone: true,
},
}
After a bit of research, I am answering my own question. If you use getServerSideProps you cannot static export your project. Therefore the node_modules folder is required to deploy the project on the server. That doesn't mean you have to FTP the node_modules, you can do the npm build on the server-side which will download node_modules to the deployment folder. In my case, the deployment folder weighs around 310MB where the node_modules folder itself is around 300MB.
You can use the [#varcel/nnc][1] package to compile the project.
In short:
Install package:
npm i --save-dev #vercel/ncc
Change build command script inside package.json
From: "build": "nest build",
To: "build": "ncc build src/main.ts -o dist",
P.S. In my case entry point for application is src/main.ts
[1]: https://www.npmjs.com/package/#vercel/ncc
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
What are some pro/cons to pushing built code vs. having the server build it?
This is a general question, but here's my specific scenario to illustrate what I'm talking about:
On Heroku I've got a React app that has a simple express server to do OAuth. Currently, I have a postinstall hook in my package.json that runs a webpack production config to do some extract-text stuff and create a dist/ directory with my bundled, uglifyied code. To get all of this to run on Heroku I had to mark pretty much all of my dependencies as 'dependencies' instead of 'devDependencies'.
I know it's a bad practice to check my dist/ into git but it would save me from having to install a dozen plus node_modules on the server. Any thoughts?
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.