Heroku - Deploy in Dev or Production - javascript

I have an express API which I am hosting on Heroku. I created two projects: one project points at my Master Branch (Prod) and the other at my Development branch (Dev).
I have two scripts in my package JSON:
"scripts": {
"devStart": "export NODE_ENV=development && nodemon server.js",
"start": "export NODE_ENV=production && node server.js"
}
How can I make it so, that the development branch runs "DevStart" and Master runs "start". Currently Prod is working fine as node start is the default script.
I understand I can put commands in my procfile, however since both Dev and Prod use the same codebase, I would need to change this with each commit. Is there a dynamic way to do this?

Ok, This might not be the correct way but here is how I did it.
I seen you can set the NODE_ENV variable for the Heroku app using terminal:
heroku config:set NODE_ENV=development --app {app-name}
My package JSON though was overwriting this when the app deployed.
"scripts": {
"devStart": "export NODE_ENV=development && nodemon server.js",
"start": "export NODE_ENV=production && node server.js"
},
I changed it to:
"scripts": {
"localStart": "export NODE_ENV=development && nodemon server.js",
"start": "node server.js"
},
This now resolves the problem. No need for the Procfile or to setup environment variables within Heroku.
On Heroku I have two apps, one for production which I don't change the NODE_ENV variable as it defaults to production, and another for Development, which I do change the NODE_ENV variable to 'Development'.
Each app is hooked up to a different branch within the same code base ( Development(Development) & Master(Production) ). Any deploys to either branch will cause a rebuild using the correct NODE_ENV variable for each respective branch.

Related

Nodejs: How to prepare code for production environment

I'm a beginner developing with Nodejs and React.
Right now, I've got a first version of my web application which works correctly in development environment, but I'm trying to build a version for production environment but I've got this error
ReferenceError: document is not defined
The scripts of my package.json are:
"scripts": {
"dev-webpack": "webpack-dev-server --hot --mode development",
"clean": "rm -rf ./dist",
"dev": "npm run build-dev && cross-env NODE_ENV=development nodemon --exec babel-node src/server/server.js --ignore ./src/client",
"build-dev": "npm run clean && npm run compile-dev",
"compile-dev": "NODE_ENV=development webpack -d --config ./webpack.config.babel.js --progress",
"compile": "NODE_ENV=production webpack -p --config ./webpack.config.babel.js --progress",
"build": "npm run clean && npm run compile",
"start": "npm run build && node ./dist/assets/js/bundle.js"
},
And I try to create the version for production environment with the command npm run start
I have been looking for information about the problem and it seems it's due because I have no Browserify my web application. But, I don't know how to do this correctly nor the steps to follow to do it correctly.
I am seeking a list of the steps required to build a correct version for production environment.
Edit I:
These are the static files generated with "build" script:
The React application is designed to be run in a browser.
When you run dev-webpack you are running an HTTP server and pointing a browser at it.
When you run build you are creating a static JavaScript file. You need to deploy it to a web server (along with the associated HTML document) and then point a browser at the HTML document.
You are currently trying to execute bundle.js with Node and not a browser.
You need to serve your index.html file. You can use serve to host the HTML file.

How to Build NextJS Project on Local without Now

I need to build My React NextJS Project on local to host it at Appache server, when I run command run build it did not generate build folder.
I R & D on it, everyone recommend ZEIT – Next.js build with Now but it build project on cloud but I need a build for my local appache server. So please help me out.
Here is an my of package.json:
......
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "next start"
},
......
After so many struggle, I found answer of my question I have to add following line in my package.json under scripts:
"scripts": {
......
"export": "npm run build && next export"
.....
},
Basically I my case, npm run build && next export was complete required command to build NextJS project. So after adding this into package.json you just need to run in terminal:
npm export
and it will generate complete build for nextjs project.
You have a package.json script called build that runs next build. The next build command by default builds the app for development, which doesn't create a production bundle.
In order to create the production bundle on your local machine, you need to specify that you're on production environment through NODE_ENV=production (this is done automatically in now and other deployment servers). Basically, your package.json would end up:
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "next start",
"prod:build": "NODE_ENV=production npm run build"
},
You can replace npm run build with next build directly if you prefer that.

Run two scripts simultaneously

I created a web application in azure to host my application js node. (Azure web application)
In my project I have an api in express that is in the app.js, however in the same project I have another file which is a cronjob.
In my package.json I have the following configuration for script:
"scripts": {
"start": "node app.js"
}
When deploying through github, the api that is in the app.js works perfectly.
My question: How do I run cronjob.js simultaneously with app.js?
You can start multiple application by using "pm2" node_module.
After installing pm2 module you can start your application by using the following command in terminal.
pm2 start app.js && pm2 start cronjob.js
You may also use forever node module.
Another option to running multiple scripts simultaneously is npm-run-all.
Install with:
npm install --save npm-run-all
Then setup your "scripts" section in your package.json like so:
"scripts": {
"app": "node app.js",
"cronjob": "node cronjob.js",
"start": "npm-run-all --parallel app cronjob"
}
And start with npm start as usual.
If the only requirement is that, I think there is no need to use another tool. Simply, you can achieve this with a single ampersand &.
"scripts": {
"start": "node app.js & node cronjob.js"
}

Bundle.js isn't found when deployed to gh-pages

I used react-create-app for building my application and deployed it to github-pages while strictly following the instructions I was given during the process. When I load the page I get an error in the console: "Failed to load resource: the server responded with a status of 404" (Bundle.js). The app runs fine when I run it using "npm run start" locally, finding all paths, but something shady is going on on github-pages. Can somebody help me fix this issue?
This is the official documentation on how to deploy your React app to Github Pages. You need to do the following:
In package.json set homepage to
{
"homepage": "https://myusername.github.io/my-app",
}
Install gh-pages
yarn add gh-pages
Add deploy and predeploy run scripts to package.json
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
Deploy it
yarn run deploy
The gh-pages branch will be automatically created, and the generated files pushed to this branch.
Relative path for "homepage"
I had 404: Not Found errors for the generated Javascript and CSS files, and it was only solved when I set the homepage (in package.json) value to
"homepage" : "."
I think you'd have to set the "homepage" variable in your package.json
and this would be your npm script command in package.json
"homepage": "https://<username>.github.io/<repo_name>/"
....
"scripts": {
...
"deploy": "npm run build&&gh-pages -d build"
...
}
More here in the docs : https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#building-for-relative-paths

Custom startup command for Node.js app on Azure with Babel 6

I'm having the same issue as this question which wasn't really resolved as the original questioner abandoned this route. I'm trying to run a node app on Azure using Babel6. The package.json file I'm using has the following in it:
"scripts": {
"start": "node ./node_modules/babel-cli/bin/babel-node.js server.js"
}
I've checked using the Azure console and the babel-cli node module is installed and the server.js file is in wwwroot. Despite this I get the following when I commit to Azure:
remote: Start script "./node_modules/babel-cli/bin/babel-node.js
server.js" from package.json is not found.
The npm version running on Azure is 3.10.3, node version is 6.6.0. Can anyone advise on how to get this up and running. Any help much appreciated!
It seems that to run node.js applications in ES2015 on Web Apps. We need to compile them to ES5 version, you can leverage Custom Deployment Script to achieve this.
Here is example repos on GitHub, which leverages gulp and custom deployment script to compile the node.js from ES6 to ES5 via the Azure deployment task.
Specially, this example defines several scripts in package.json for the deployment task calling:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "gulp nodemon",
"build": "gulp build"
},
And manually call the npm scripts in deploy.cmd before KuduSync task move the deployment folder to production folder.
:Deployment
echo Handling node.js deployment.
:: 0. Select node version for build
call :SelectNodeVersion
:: 1. Install build dependencies
pushd "%DEPLOYMENT_SOURCE%"
call :ExecuteCmd !NPM_CMD! install --production
IF !ERRORLEVEL! NEQ 0 goto error
popd
:: 2. Run build command
pushd "%DEPLOYMENT_SOURCE%"
call :ExecuteCmd !NPM_CMD! run-script build
IF !ERRORLEVEL! NEQ 0 goto error
popd

Categories