I have a React App that works beautifully over HTTPS using a .env.production file containing:
HTTPS=true
SSL_CRT_FILE=/etc/ssl/certs/mycert.crt
SSL_KEY_FILE=/etc/ssl/private/mykey.key
the package.json file contains:
"scripts": {
"start": "env-cmd -f .env.production react-scripts start",
"build:production": "env-cmd -f .env.production react-scripts build"
}
when I do:
npm start
everything works, and I can access my server over HTTPS from anywhere. Now, this is the funny thing, now I do:
npm run build:production
which also works fine, and I get:
The build folder is ready to be deployed.
You may serve it with a static server:
serve -s build
Now, this is what fails:
1) When I use the serve command above, the environment variables in the .env.production file are not picked up! Why?
2) If I pass the environment variables manually as in:
HTTPS=true SSL_CRT_FILE=/etc/ssl/certs/mycert.crt SSL_KEY_FILE=/etc/ssl/private/mykey.key PORT=8580 serve -s build
Only the PORT variable seems to be picked up, but the server now runs on HTTP. Any ideas why?!
When you run npm start, a development server is started for you under the hood that is configured to pick up the SSL_CRT_FILE, SSL_KEY_FILE and HTTPS env vars automatically.
serve doesn't do that, you need to let it know with these CLI flags:
serve -s build --listen 8580 --ssl-cert "/etc/ssl/certs/mycert.crt" --ssl-key "/etc/ssl/private/mykey.key"
Related
I have simple running react Server Side App .
GitHub Link for the repo, in the local env i have a build script that runs using npm start which starts the client and server builds and then i have a watcher which listen's to changes in file. This set up works really well locally.
"scripts": {
"start": "npm run dev",
"dev": "npm-run-all --parallel dev:*",
"dev:server": "nodemon --watch build --exec \"node build/bundle.js\"",
"dev:build-server": "webpack --config webpack.server.js --watch",
"dev:build-client": "webpack --config webpack.client.js --watch"
},
I tried to deploy these changes as a prod app to heroku here for some odd reason it never works and returns 503 . I have not added any changes to the build scripts in the package.json and tried deploying as is.
I thought it should work as the build log dosent give any errors on heroku but while trying to access the app it shows error and asks me to check app log but i am not using heroku cli and not planning on using it , and
thinking of auto deployment from github.
I am quite new to script/ largely build scripts trying to learn more on them.
How can we make sure this small React SSR git repo deploys and i am
able to access the home page .
I am not using heroku cli and not planning on using it
You should and I really recommend, as it's the best way to see errors that occurs after the build, why your app crashed and see the full logs. Even though you can see the logs from your heroku dashbord (More -> View logs), this only gives you the tail of the logs.
How can we make sure this small React SSR git repo deploys and i am able to access the home page.
Make sure the server is listening on the right port
by using process.env.PORT as heroku expose a dynamic port.
const port = process.env.PORT || 3000
app.listen(port, () => {
console.log('Listening on Port ' + port);
})
On heroku the NODE_ENV environment variable is set toproduction by default,
which means heroku will prune thedevDependencies after the build,
but in your case, you still need these dependencies to start your app with webpack.
You can fix this in two ways :
Customize your build process by adding a build script:
From your github
repo
:
"start": "webpack --config webpack.client.js; webpack --config webpack.server.js; node build/bundle.js"
to
"scripts": {
"start": "node build/bundle.js",
"build": "webpack --config webpack.client.js & webpack --config webpack.server.js",
"build:start": "webpack --config webpack.client.js && webpack --config webpack.server.js && node build/bundle.js",
}
Set the NODE_ENV to any other value to skip pruning your
devDependencies
heroku config:set NODE_ENV=development //(Another reason to use the CLI)
Check this link for more details
We are working on nodeJs/ExpressJs we have configured multiple .env files for development and production and pointing it to package.json for different execution process, we have naming conversation issues at scripts.
Whenever we run npm run prod it takes to preprod configuration. what could be the issues?
Update: we have figured that the suffix of the script key is the same in the next script, after update/rename preprod to preProd the both runs fine. but why?
Eg :
"scripts": {
"dev": "clear; env-cmd -f ./config/hostedDev.env nodemon --exec babel-node index.js",
"prod": "clear; env-cmd -f ./config/prod.env nodemon --exec babel-node index.js",
"preprod": "clear; env-cmd -f ./config/preprod.env nodemon --exec babel-node index.js"
},
Apparently the issue is with the word 'pre'.
If you would have noticed it runs both preprod and prod commands (pre running first).
If you change the script name to 'postprod' the postprod script will run later.
So, I guess npm uses 'pre' as to run before the 'prod' script and then running 'prod' script itself.
I am running the node server after the application build, pointing to the dist folder using: node dist/server/main.js. The server points to production environment by default (I think that's what webpack does by default).
In order to make it reference the local environment I tried the 2 scripts below:
"start": "cross-env NODE_ENV=local ./node_modules/.bin/cross-env node
dist/server/main.js"
and
"start": "cross-env NODE_ENV=local node dist/server/main.js"
These does not work. Is there any way if my server could point to the local/ development environment instead of always pointing to production? Thanks!
Your crossenv syntax looks wrong. It should probably be:
"start": "cross-env NODE_ENV=local node dist/server/main.js"
So I have an Angular and Node.js app that I'm hosting on Heroku. I want to be able to run this app on localhost for testing but also have it work on Heroku. So I decided to use an environment variable to define the URL of the app for API calls.
So in environment.ts I have
export const environment = {
production: false,
apiURL: 'https://localhost:8080/'
};
And in environment.prod.ts I have:
export const environment = {
production: true,
apiURL: 'myHerokuURL'
};
So when I run on heroku I want the production URL to be used. How can I do this?
To run locally I do, nodemon server.js then ng serve.
However on Heroku I need to do something like ng serve --env=prod but not sure how to do it.
These should help
Option 1
If you are using angular-cli, then
ng build --prod
will do the trick. Then you can copy everything from .dist folder to your server folder
Option 2
you can use http-server to serve your app . To install http-server
npm install http-server -g
and after going to your project folder
http-server ./dist
it will serve all the files in your folder. you can check the terminal what ip-address and port you can use to access the application. Now open up your browser and type
ip-adress:port/index.html
Source: how to deploy angular2 app built using angular-cli
Hope it helps.
In your package.json add
"heroku-postbuild": "ng build --configuration=production"
instead of
"postinstall": "ng build --aot --prod"
This will trigger only one (production) build on heroku. If you leave your current setup you can see in your heroku app logs that you first build everything with --prod but then it just makes normal build.
I'm trying to deploy my first node app to heroku. I have set up a Procfile with the following code
web: node ./app/server.js
but when I deploy to heroku and check the logs I see the error Error: Cannot find module '/app/server.js'.
On local it works fine. I have the following in my package.json nested under scripts
"start": "nodemon ./app/server.js
Nodemon is a utility that will monitor for any changes in your source and automatically restart your server. Perfect for development.
While using nodemon its better to maintain script commands for dev and production as follows:
"scripts": {
"start": "node ./app/server.js",
"dev": "nodemon ./app/server.js"
}
To determine how to start your app, The deployment server( Heroku) first looks for a Procfile. If no Procfile exists for a Node.js app, It will attempt to start a default web process via the start script in your package.json.
If you use nodemon in script, It'll internally try to run node server.js but in your case start file present in app/server.js. To avoid these issues it's better to use two separate script commands for dev and production. So that while running locally you can use npm dev command.