Deploy React.js Starter Kit on Openshift - node.js

I'm trying to deploy the Starter Kit of React.js (available here : https://github.com/kriasoft/react-starter-kit) on Openshift. To do that, I modified some little things that I explain here.
First, the logs in Openshift tells me that the import keyword in the servers.js file is not recognized. I think Babel is not used by Openshift at this point.
A workaround for that is mentioned here : How do I modify the node startup command in Open Shift?
So I modified the server.js content (because Openshift run the node server.js command and not the babel-node tools/run start defined in the scripts.start property of package.json) with the recommended content and renamed my base server.js to app.js.
Now, the logs tells me that babel-core is not found so I modified the package.json file to put babel-core and babel-cli in dependencies instead of devDependencies and remove a DEV value of another property.
All the times, when I push my code on Openshift (code of the src folder), the compilation failed at a random time (when dependencies are installed) and it take a long long time. However, when I reboot the cartridge I can see logs I explained.
My current situation is that things are looking better but the problem is the disk space : not enough. That's surprising me because the cartridge can host 1GB and on my local machine all files with dependencies take ~148MB. I tried to delete and recreate the cartridge : the same thing appears.
Does anybody know what can be wrong here ? The fact that the cardridge exceed 1GB is weird...
Thank you all.

Here's the solution... I hope it will save hours for some people !
Set the "production" mode to the cartridge app (so that in don't download so many inodes) :
rhc set-env NODE_ENV=production --app appname
Don't forget to modify config.js :
export const port = process.env.OPENSHIFT_NODEJS_PORT || process.env.PORT || 3000;
export const host = process.env.OPENSHIFT_NODEJS_IP || 'localhost';
export const databaseUrl = 'sqlite:' + process.env.OPENSHIFT_DATA_DIR + 'database.sqlite';
Modify app.js (include the host):
import { port, host, auth, analytics } from './config';
//...
models.sync().catch(err => console.error(err.stack)).then(() => {
app.listen(port, host, () => {
console.log(`The server is running at http://${host}:${port}/`);
});

Related

changing port not working in vuejs project

I have made a sample app in vuejs and try to change the port number. However this seems not to work as I get connection refused on that particular port, like nothing is being served on that port.
So I made a vue.config.js file in the root of my vuejs project.
This config file looks like this:
const BundleTracker = require("webpack-bundle-tracker");
module.exports = {
outputDir: './dist/',
chainWebpack: config => {
config.optimization
.splitChunks(false)
config
.plugin('BundleTracker')
.use(BundleTracker, [{filename: '../frontend/webpack-stats.json'}])
config.resolve.alias
.set('__STATIC__', 'static')
config.devServer
.public('http://0.0.0.0:8080')
.host('0.0.0.0')
.port(8080)
.hotOnly(true)
.watchOptions({poll: 1000})
.https(false)
.headers({"Access-Control-Allow-Origin": ["\*"]})
}
};
When I do 'npm run serve', I get the following:
App running at:
- Local: http://localhost:21739/
- Network: http://0.0.0.0:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
The port at 21739 is working but the one at 8080 is not working?
Does anyone have any idea what I am doing wrong here, or did I forget something?
Found a somewhat hacky fix. In node_modules/#vue/cli-service/lib/commands/serve.js there is this line that defines the port it is like:
const port = await portfinder.getPortPromise()
I have changed it to
const port = args.port || process.env.PORT || projectDevServerOptions.port
Now everything loads well. Don't know why they choose that approach and if there is a better way to handle this i'd like to know.

How to set up dev and API server from create-react-app?

I've started a new app with create-react-app, and ejected from that. I made a small express server as follows:
const express = require('express');
const app = express();
if(process.env.NODE_ENV === 'production') {
app.use(express.static('build'));
}
const port = process.env.PORT || 3000;
app.listen(port, () => {
console.log(`Server started at: http://localhost:${port}/`);
});
In package.json I've added a line, "proxy": http://localhost:3000", as well as switching the commands:
"scripts": {
"run": "npm-run-all -p watch-css start-js",
"start": "node server.js",
},
run used to be start.
However now of course when I run npm start and go to localhost:3000, I get Cannot GET /. I need this server to receive and return local API calls I'll be making from my app, but I also want it to run a hot-reloading dev server just like the old npm start (now npm run) command did. How do I do this?
Some time ago I made a fork of the create-react-app repository adding webpack watch option because of this same reason. It might help you.
Just to add more info, I really invested time looking on how to get webpackdevserver to build the "bundle.js", and found that it is not possible because it loads the bundle into memory but doesn't persist it, so the file is never created. The only way available is the webpack watch option but, I don't understand why the create-react-app team can't add it to the repo, it's a really requested feature, and there are more forks than mine that solves this issue. So, you have three options:
Use the proxy server in package.json (if it works)
Make your own fork and add the watch option, or use an existing one
Don't use create-react-app

nodejs and express with heroku im getting R10

thanks for taking time to help me
im deploying a nodejs express js project
these are the steps that i have done:
1- change the port to: process.env.PORT
code:
const PORT = process.env.PORT || 9000;
app.listen(PORT , function() {
console.log('Application is listening on 9000');
});
2- create Procfile with: web: node server.js
3- make sure in package json the npm start command points to "node path/server.js"
the server works locally
4- important note: I am sending an AJAX request from my front end to the server to get data
I have read on you documentation that i should add 0.0.0.0
$.ajax({
url: "0.0.0.0/hotels",
cache: false,
type: 'GET',
success: function(result) {
bla bla ....
}
});
also i have tried to add the url of heroku the one i get after creating
thanks in advance
have a great day
did not solve it yet but i organized some helpful heroku commands
useful commands
git remote -v
git remote rm heroku
heroku create
git push heroku master
heroku ps:scale web=1
heroku open
heroku logs --tail
heroku run bash
Your code there looks fine (except 0.0.0.0 -- just use a relative path like /). I would ensure you've actually pushed the changes you have there. If you run heroku run bash, do you see your Procfile? When you run node server.js in that environment, does it run successfully?
I've seen Heroku customers get stuck on an issue like this, when the reality is that the code they have locally wasn't properly sent to Heroku.
Hello #jmccartie thank you for replying but it still does not work
could it be the static __dirname? im starting to question every part of the code :D
I changed the path and just to make sure i understood correctly
it used to be : "http://localhost:9000/data/hotels"
now is: "/data/hotels"
would you mind taking a look at my code?
just double check the parts i mentioned
https://github.com/hibaAkroush/herokuNode
i will name the files to make it easier for you
1- Procfile in the root
2- server in server/index.js line 24
3- the front end (where im sending an ajax get request) client/home.js line 6
4- packagejson line 10: "start": "node server/index.js"
thanks
ok i fixed it ...
wohoo!
not sure which thing i made fixed it
but what i did was:
1- I moved the server to the root and of course changed the code a bit so it would still work than i tested it locally to make sure
2- pushed on github
3- added ./ to procfile so it became
web: node ./index.js
instead of web: node index.js
thanks everyone !

How to fix 8080 port unavailable error for parse-server in openshift

I am migrating my data back-end to openshift from parse.com.
Step 1. I changed openshift port binding of project into following
//var port = process.env.PORT || 1337;
var port = parseInt(process.env.OPENSHIFT_NODEJS_PORT) || 8080;
var httpServer = http.createServer(app);
httpServer.listen(port, function() {
console.log('parse-server-example running on port ' + port + '.');
});
and folked as my new repo https://github.com/kyawzinsoe/parse-server-example.git
Step 2.
Then I create a gear with my parse-server repo with following command.
rhc app-create myserver nodejs-0.10 mongodb-2 --from-code=https://github.com/kyawzinsoe/parse-server-example.git
But it show 8080 port problem as following
What am I missing? Please help me.
You need use Node 4.1+ with parse server. OpenShift is running 0.10.x
You can use this repo https://github.com/h4t0n/nodejs-4-lts-openshift in order to run Node 4.1+ on your OpenShift app.
Update:
I have set up a deploy to OpenShift button that will do most of the work for you:
you will still need to set up you "appId" and "masterKey" either by editing index.js file or with rhc env set APP_ID=myAppId MASTER_KEY=myMasterKey -a myAppName
This is how you can do it the same thing with rhc tool:
rhc app create parseaio http://cartreflect-claytondev.rhcloud.com/github/icflorescu/openshift-cartridge-nodejs http://cartreflect-claytondev.rhcloud.com/github/icflorescu/openshift-cartridge-mongodb --from-code https://github.com/antt001/parse-server-example --env APP_ID=myAppId MASTER_KEY=myMasterKey
for more in-depth instructions, check out my blog post on this topic
Original answer
create app using cartridge from http://github.com/icflorescu/openshift-cartridge-nodejs
paste url from Github page into "Code Anything" textbox at the bottom of the page of application creation Choose a type of application page.
on next page paste https://github.com/antt001/parse-server-example into Source Code textbox, to grab parse example project, modified for openshift settings
add recent MongoDB cartridge as instructed at http://github.com/icflorescu/openshift-cartridge-mongodb
clone your repo from OpenShift
replace "appId" and "masterKey" values in the index.js file with your app id and key.
It works fine, I am running this configuration right now.
Update 2
I have removed the snippet, since it is now on a GitHub repo that I mentioned above.
P.S.
as mentioned by #radzio, there is a problem with compiling native nodejs that requires GCC 4.8, however, this configuration does not need any of this and works as is, it uses bcrypt-nodejs instead of native
Thanks to #ionut-cristian-florescu for custom cartriges
My Problem is solved by #Jiri Fiala's comment that I need to set openshift IP

How do I make Openshift to use Express 4, instead of its installed Express 3?

I developed my Nodejs Express app locally using Express 4 and it works as expected on my computer. I then git the whole app up to Openshift. When I try to run it Openshift returns"503 Service Unavailable". If I ssh into my base Node cartridge and do "express -V" it returns version 3.2.5. I get the same version 3.2.5 if I go into my app folder at app-root/repo and run "express -V".
So clearly my Express 4 which was included in the git upload in my app's node_modules is not being used. What is the solution to use Express 4 as required by my app?
Ideas are- remove Openshift's version of Express 3, force Openshift to use my Express 4 in my app area, upgrade Openshift's Express 3 to Express 4. I cannot figure out how to do any of those and I have researched this.
Here's how to troubleshoot:
ssh into your cartridge
cd into the app-root/repo directory
run grep version ./node_modules/express/package.json
you should see a version based on your package.json dependency
verify your package.json has a scripts section containing a start command that just runs your app with something like node ./server.js (server.js being whatever file you coded your main app start script in). You don't need the express command line program to launch an express server. It's for setting up new project boilerplate and other ancillary tasks.
To see the version of express running within your app, you can add this code to your server.js (or equivalent) file: console.log(require("express/package").version);
Look at this project to know how to integrate openshift with express4
Its a simple example .
https://github.com/master-atul/openshift-express4
try this
rhc ssh
cd app-root/repo
npm start
also edit the ./bin/www
var port = normalizePort(process.env.OPENSHIFT_NODEJS_PORT || '8080');
var ip = process.env.OPENSHIFT_NODEJS_IP;
if (typeof ip === "undefined") {
// Log errors on OpenShift but continue w/ 127.0.0.1 - this
// allows us to run/test the app locally.
console.warn('No OPENSHIFT_NODEJS_IP var, using 127.0.0.1');
ip = "127.0.0.1";
};
//app.set('ip', port);
app.set('port', port);
var server = http.createServer(app);
server.listen(port, ip);
server.on('error', onError);
server.on('listening', onListening);
you can follow step:
copy all content bin/www and replace all content in file server.js:
Change some content at server.js:
from
`var port = normalizePort(process.env.PORT || '3000');`
to
var port = normalizePort(process.env.OPENSHIFT_NODEJS_PORT || '3000');
Add line:
var ip = process.env.OPENSHIFT_NODEJS_IP || '127.0.0.1';
from
server.listen(port);
to
server.listen(port, ip);
Add more to package.json
from
"scripts": {
"start": "node bin/www"
},
to
"scripts": {
"start": "node server.js"
},
Add line:
"main": "server.js",
Use npm install --save module-name for npm install
create file .gitignore with content:
node_modules
on local run node server.js to start server with address localhost:3000
upload to openshift:
git add .
git commit -m "First update new server version"
git push
Browser: domain-appname.rhcloud.com

Resources