Challenges and Solutions: Deploying Thoughtworks Tech Radar Node.js + Webpack on Heroku.
A few days back, I got a chance to deploy Thoughtworks Tech Radar (a Node.js package) on Heroku as our own organization Tech Radar. Although Deploying a Node.js application with Webpack on Heroku can be an easy process, still you may face certain challenges while deploying.
Here's a brief rundown of the challenges I have faced and how I tackled them during the deployment process.
1. Missing Procfile
One of the initial challenges I faced was forgetting to include a Procfile in my project's root directory. This resulted in Heroku not knowing how to start my application as Heroku uses a Procfile to determine how to run your application. Know more about Procfile
To resolve this, I created a simple Procfile that specifies the below command to run my Node.js server.
To resolve this, I created a simple Procfile that specifies the below command to run my Node.js server.
```
web: npm install --include=dev && npm run dev
```
2. Heroku-prebuild - command
Webpack is commonly used to bundle and optimize JavaScript code for production. However, after the build process, I realized that Heroku wasn't automatically executing the necessary steps to prepare my application for deployment. To address this, I added a heroku-prebuild script in my package.json to ensure that the required build commands are executed before build deployment on Heroku.
```
"scripts": {
"heroku-prebuild": "npm install --include=dev && npm run build:dev"
}
```
3. Dynamic Port binding - Heroku provides a dynamic port.
Heroku dynamically assigns a port to your application, and you need to ensure that your Node.js server uses the correct port. To achieve this, I modified my Webpack server configuration to use the process.env.PORT variable provided by Heroku added the following configuration to my webpack.dev.js file
```
devServer: {
port: process.env.PORT || 3000,
}
```
5. Invalid Host Header - Configure allowed host on Webpack
Finally, when the build is deployed to Heroku without any build error, then I encounter an "Invalid Host Header" error while accessing the application landing page. This is a security feature in Webpack. To fix this, I added the following configuration to my webpack.dev.js file to allow request from my heroku app hostname like heroku-app-name.herokuapp.com where `heroku-app-name` can be your subdomain url or your app on Heroku.
```
devServer: {
allowedHosts: [
'heroku-app-name.herokuapp.com'
],
}
```
4. Using ENVs inside the node.js + Webpack app
After resolving all the above challenges, I was finally able to see my landing page. But still, there was one challenge left - It was not considering the new ENV variables I added to provide the Tech radar Google sheet URL or ID. I couldn't access the value of ENVs simply using process.env.SHEET as we can use in normal JS apps. For Webpack we need to pass it through Webpack configuration to make them available inside the app or src files.
To access ENVs variable inside your src directory files i used Webpack configuration like below:
```
To access ENVs variable inside your src directory files i used Webpack configuration like below:
```
plugins: [
new webpack.DefinePlugin({
'process.env.API_KEY': JSON.stringify(process.env.API_KEY),
'process.env.SHEET_ID': JSON.stringify(process.env.SHEET_ID),
}),
]
Official documentation for Webpack configuration helped me a lot to resolve configuration-related issues.
Deploying our own Tech Radar (Node.js + Webpack app) on Heroku for the organization was a good learning experience for me, and resolving the above challenges has enhanced my understanding of the deployment process of the Node.js app on Heroku. Finally, I was able to successfully deploy and run my application on Heroku.
I hope this blog post helps fellow developers resolve similar issues in their node.js + web pack deployment journey on Heroku or even on other cloud platforms.
If you face any different challenge than above, please do let me know in the comments.
Comments
Post a Comment