How can i deploy a Selenium NodeJS web app to Heroku? - node.js

Question

I have created a Selenium NodeJS web app in Local. It uses chromedriver and my driver must use some chrome extensions. Everything is ok in local.
I want to use it in Heroku but I could not do it. I tried it with build packs but but I could not do it again.
How can i deploy it to Heroku ?
package.json (dependencies):
..
"dependencies": {
"body-parser": "*",
"express": "*",
"firebase": "^4.1.5",
"firebase-admin": "^4.2.1",
"selenium-webdriver": "*",
"chromedriver":"*",
"telebot":"*"
},
..

Answer 1

Note: I am using React, Express, and Selenium with chrome
Step 1: Create a new Heroku app.
Step 2: From your terminal, login to heroku using heroku login
step 3: Once you're logged in, cd to your project directory and set it's remote to your heroku app. heroku git:remote -a YOUR-HEROKU-APP-NAME
step 4: Run all the following commands in your terminal
heroku buildpacks:add https://github.com/heroku/heroku-buildpack-chromedriver
heroku buildpacks:add https://github.com/heroku/heroku-buildpack-google-chrome
heroku config:set CHROME_DRIVER_PATH=/app/.chromedriver/bin/chromedriver
heroku config:set CHROME_BINARY_PATH=/app/.apt/opt/google/chrome/chrome
step 5: Login to heroku from your browser and navigate to your app. Go to settings and under buildpacks, add heroku/nodejs
step 6: This is how my index.js looks like. Note: my express entry point is inside root-dir/server/index.js and my react files are inside root-dir/client/
const express = require('express');
const app = express();
const path = require('path');
// Serve static files from the React app.
app.use(express.static(path.join(__dirname, '..', 'client/build')));
app.get('/api', async (req, res) => {
const webdriver = require('selenium-webdriver');
require('chromedriver');
const chrome = require('selenium-webdriver/chrome');
let options = new chrome.Options();
options.setChromeBinaryPath(process.env.CHROME_BINARY_PATH);
let serviceBuilder = new chrome.ServiceBuilder(process.env.CHROME_DRIVER_PATH);
//Don't forget to add these for heroku
options.addArguments("--headless");
options.addArguments("--disable-gpu");
options.addArguments("--no-sandbox");
let driver = new webdriver.Builder()
.forBrowser('chrome')
.setChromeOptions(options)
.setChromeService(serviceBuilder)
.build();
await driver.get('http://www.google.com');
res.send(await driver.getTitle());
});
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, '..', 'client/build/index.html'));
});
const port = process.env.PORT || 5000;
app.listen(port, () => {
console.log(`listening to port ${port} now...`);
});
step 7 (if you are using React): Now inside your package.json in root-dir/, add this
"scripts": {
...
"heroku-postbuild": "cd client && npm install && npm run build"
}
step 8 (if you are using react): inside your package.json in root-dir/client/ (i.e: package.json for react app), add the following line:
"proxy": "http://localhost:5000/",
step 8: (if you're using react): inside root-dir/client/src/, create a new file called setupProxy.js and paste the following code:
const proxy = require("http-proxy-middleware");
module.exports = function(app) {
app.use(proxy('/api', { target: `http://localhost:${process.env.PORT || 5000}/`}));
};
step 9: Now, you are ready for deployment. Make sure you have the following packages installed: express, selenium-webdriver, and chromedriver
step 10: now push it to heroku
git add .
git commit -m "my app"
git push heroku master

Answer 2

you can do the following steps to deploy your application on heroku
1)make an new repository on git
create an account on github and create an new repository
then on command line check the status of your project file using
git status
if they are red mark then add all the file using
git add .
then commit
git commit -m "first commit"
2)push all the data on that repository
git remote add origin https://github.com/git_account/repository_name.git
git push -u origin master
3) then push from git to heroku
git push heroku