Deploying ember-cli app to Heroku - node.js

What do I put in my Procfile to deploy an ember-cli generated app to Heroku?
=== web (1X): `ember server`
web.1: crashed 2014/04/10 13:19:57 (~ 48s ago)
=== web (1X): `npm start`
web.1: crashed 2014/04/10 13:22:11 (~ 2m ago)

You could use the Heroku Ember CLI buildpack: https://github.com/heroku/heroku-buildpack-emberjs

I have this in my Procfile and it's is working for me:
web: ember serve --environment production --port $PORT
I followed the instructions from this gist, which is where I got that Procfile.
The ember-cli version and dependencies in the gist are out of date, which was causing my app to crash similar to yours.
I needed to add/replace the packages listed in the "dependencies" section of my package.json file with the packages ember-cli puts into the "devDependencies" section of package json. When I was done my package.json file looked like this:
{
"name": "your-apps-name",
"version": "0.0.0",
"private": true,
"directories": {
"doc": "doc",
"test": "test"
},
"scripts": {
"start": "ember server",
"build": "ember build",
"test": "ember test",
"postinstall": "bower install"
},
"repository": "https://github.com/stefanpenner/ember-cli",
"engines": {
"node": ">= 0.10.0"
},
"author": "Your Name",
"license": "Your App's License",
"devDependencies": {
"ember-cli": "0.0.28",
"originate": "0.1.5",
"broccoli-ember-hbs-template-compiler": "^1.5.0",
"loom-generators-ember-appkit": "^1.1.1",
"express": "^4.1.1",
"body-parser": "^1.2.0",
"glob": "^3.2.9"
},
"dependencies": {
"bower": "^1.3.3",
"broccoli-template": "0.1.1",
"ember-cli": "0.0.28",
"originate": "0.1.5",
"broccoli-ember-hbs-template-compiler": "^1.5.0",
"loom-generators-ember-appkit": "^1.1.1",
"express": "^4.1.1",
"body-parser": "^1.2.0",
"glob": "^3.2.9"
}
}

Procfile:
web: npm run start
Package.json:
"scripts": {
"start": "ember serve --port=${PORT}",
"build": "ember build",
"test": "ember test",
"postinstall": "bower install"
},
and rename devDependencies block and add bower as a depency:
"devDependencies": { ... }
to
"dependencies": {
"bower": "1.3.12"
...
}
but add devDependencies again and add ember-cli there for ember to detect your app:
"devDependencies": {
"ember-cli": "0.1.15"
}
A bit more information and further links can be found from my blogpost:
https://personalwebdevelopment.wordpress.com/2015/02/23/deploying-ember-cli-app-to-heroku/

you can try with 'npm start' or 'ember server'

You could use the Ember buildpack recommended by Heroku: https://www.heroku.com/emberjs
To define this buildpack for an existing application, you'll need to run the command below:
heroku buildpacks:set https://codon-buildpacks.s3.amazonaws.com/buildpacks/heroku/emberjs.tgz

Related

Error during uploading mern stack project into heroku

In Procfile:
web: node Backend/server.js
In package.json of backend, I am using post build for react app. its saying cannot find module /app/backend/server.js.
{
"name": "ecommerce",
"version": "1.0.0",
"description": "",
"main": "Backend/server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node backend/server.js",
"dev": "nodemon backend/server.js",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false && npm install --prefix frontend && npm run build --prefix frontend"
},
"author": "",
"license": "ISC",
"dependencies": {
"bcryptjs": "^2.4.3",
"body-parser": "^1.19.0",
"cloudinary": "^1.28.1",
"cookie-parser": "^1.4.5",
"dotenv": "^10.0.0",
"express": "^4.17.1",
"express-fileupload": "^1.2.1",
"jsonwebtoken": "^8.5.1",
"mongoose": "^6.0.10",
"nodemailer": "^6.7.0",
"nodemon": "^2.0.13",
"stripe": "^8.197.0",
"validator": "^13.6.0"
}
}
My project is laid out like this:
Backend/
frontend/
Procfile
package-lock.json
package.json
Your start script tries to run node backend/server.js, but your file is actually at Backend/server.js. Heroku's filesystem is case-sensitive. You can use either option, but you must be consistent.
Here is one solution. Rename your directory:
git mv Backend backend
And update your Procfile:
web: node backend/server.js
Then commit and redeploy.

How to run a Node.Js backend project from another developer?

I'm new to Nodejs, normally when I make a project, I install the dependencies myself, and in order to run the project set something like this in the packaje.json:
"scripts": {
"dev": "nodemon server.js"
}
and then I just run my project with something like this npm run dev
But in a project made by someone else it doesn't seem to be that simple because it has the dependencies like this:
{
"name": "proyecto API",
"version": "1.0.0",
"description": "proyecto Main Backend Repo",
"main": "index.js",
"type": "module",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "cross-env NODE_ENV=production node --harmony index.js",
"dev": "cross-env NODE_ENV=development nodemon --harmony index.js",
"lint": "eslint --ext .js --ignore-path .gitignore .",
"lint:fix": "eslint --ext .js . --fix",
"superuser": "node --harmony createSuperUser.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/proyecto-Network/lolagato"
},
"author": "gatito",
"license": "MIT",
"bugs": {
"url": "https://github.com/proyecto-Network/lolagato/issues"
},
"homepage": "https://github.com/proyecto-Network/lolagato/erths",
"dependencies": {
"#google-cloud/storage": "^5.14.2",
"cookie-parser": "^1.4.5",
"cors": "^2.8.5",
"express": "^4.17.1",
"jsonwebtoken": "^8.5.1",
"mongo-project": "^1.0.1",
"mongodb": "^4.1.0",
"morgan": "^1.10.0"
},
"devDependencies": {
"cross-env": "^7.0.3",
"nodemon": "^2.0.12"
}
}
Apparently here I can't just do npm run dev because as you can see in the packaje.json it comes out this:
"dev": "cross-env NODE_ENV=development nodemon --harmony index.js"
So my questions are, how can I run this project on my PC and what does that say "cross-env" and --harmony mean?
I have to install all that that appears in the packaje.json?
Just do,
npm install
This will install all the required dependencies. If you notice, in the devDependencies there is cross-env which is required for your npm run dev.
Once the dependencies are brought up, do npm run dev.
Or you could just do -
nodemon index.js
or
nodemon --harmony index.js
To see what happens.
cross-env NODE_ENV=development is just setting the environment variables. From their npm page -
cross-env makes it so you can have a single command without worrying about setting or using the environment variable properly for the platform.

Deploy to Node App Azure App Service tsc not recognized as command

I am trying to deploy a nodejs app onto Azure App Service. I did the basics of deploying it, but it's failing to run. It seems it is designed to run "node run.js" commands rather than "npm run start".
I'm playing in the console, and if I try to run npm run start manually, I get a series of errors tied to build. Basically:
'tsc' is not recognized as an internal or external command
I'm wondering if there's something really obvious here about how tsc (and others) can be added to path. I have to admit, I'm not particularly well versed in using Azure or Node for that matter. Any help would be very much appreciated! Thanks!
This is the package.json file:
{
"name": "test-scraper",
"version": "0.1.1",
"description": "",
"main": "dist/main.js",
"scripts": {
"build": "tsc",
"build:dev": "tsc --watch",
"prestart": "npm run build",
"start:dev": "nodemon",
"start": "pm2 start dist/src/main.js --node-args=\"-r ./tsconfig-paths-bootstrap.js\" && pm2 monit",
"stop": "pm2 delete main"
},
"author": "",
"license": "MIT",
"devDependencies": {
"#types/lodash": "^4.14.161",
"#types/node": "^14.11.8",
"#types/puppeteer": "^3.0.2",
"nodemon": "^2.0.4",
"prettier": "^2.1.2",
"typescript": "^4.0.3"
},
"dependencies": {
"axios": "^0.20.0",
"discord-webhook-node": "^1.1.8",
"lodash": "^4.17.20",
"messaging-api-telegram": "^1.0.1",
"playwright-firefox": "^1.4.2",
"pm2": "^4.5.0",
"tsconfig-paths": "^3.9.0",
"winston": "^3.3.3"
}
}
Run this command locally for installing typescript, because your code is compiled with the tsc command.
npm install -g typescript
Mostly I was following this tutorial.
Add the tsc command to package.json and add the dependencies:
"build": "tsc --project ./"
...
"devDependencies": {
"#types/express": "^4.17.9",
"#types/node": "^14.14.20",
"ts-node": "^9.1.1",
"typescript": "^4.1.3"
},
Here is my file structure:
I add a empty file.ts and add this scripts to the tsconfig.jason file:
"exclude": [ "src", "wwwroot" ],
"include": [ "file.ts" ]
Deploy through Azure Web App deployment center:
And the app build (tsc) run successfully:
if you are deploying to Production (NODE_ENV: production), devDependencies will no longer being installed, and you need to edit your package.json and move typescript to dependencies.
Source

How can I deploy a react app with a node backend on GitHub Pages?

I just started learning about concurrently npm to React.
I want to know how to deploy React project on Github page with concurrently npm.
Normally on local machine we would run the app with server side package.json file
"dev": "concurrently "npm run server" "npm run client""
In Terminal> npm run dev
I tried with gh-pages npm to deploy react app on Github page but with concurrently npm,
I have no idea how to do it since there are two package.json.
Also, I don't know much about NODE environment and npm run build.
Server side package.json:
{
"name": "contact-keeper",
"version": "1.0.0",
"description": "Contact manager app",
"main": "server.js",
"homepage": "https://myprofile.github.io/Contact-Keeper-with-React",
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"clientinstall": "npm install --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\""
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"bcryptjs": "^2.4.3",
"config": "^3.1.0",
"dotenv": "^8.0.0",
"express": "^4.17.1",
"express-validator": "^6.1.1",
"jsonwebtoken": "^8.5.1",
"mongoose": "^5.6.4"
},
"devDependencies": {
"concurrently": "^4.1.1",
"gh-pages": "^2.1.1",
"nodemon": "^1.19.1"
}
}
Client side server package.json:
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.19.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.1",
"react-scripts": "3.0.1",
"react-transition-group": "^4.2.1",
"uuid": "^3.3.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://localhost:5000"
}
Is there any document or basic knowledge about setting environment that I need to learn more to understand this topic?
Github is not (quite) a service for serving your working application to other users. Github is a repository for storing your code, updating it, and managing versions.
I think that to deploy your app "concurrently" to github means there is a way of updating Github with the new version code, at the same time as you deploy it online to a service, such as Heroku.
You should research and understand what Git (as opposed to github) is, as its essential for development. Get skilled at managing your app code with git first, before trying to deploy to a service like Heroku, AWS etc....
EDIT
As pointed out by Asaf Aviv, you can serve front-end apps from Github, with github pages, but you still need to be able to push your local code up to github for this to work.

GatsbyJS blog not compiling anymore after "npm update"?

If it's a Gatsby, webpack or npm issue i don't understand yet.
I did these commands in terminal and they seem to have started the issue, trying to fix a material-ui "Popper" module that had a "could not find module" error.
npm install react-popper#next --save
npm install avj
npm install --save-dev webpack
npm install & npm update
Terminal:
error There was a problem loading the local develop command. Gatsby
may not be installed. Perhaps you need to run "npm install"?
Error: Cannot find module 'webpack/lib/removeAndDo'
package.json
{
"name": "auto-club-reviews",
"description": "Auto Club Reviews Blog",
"version": "1.0.0",
"author": "Sofianu Alin",
"dependencies": {
"#material-ui/core": "^1.4.3",
"#material-ui/icons": "^1.1.0",
"gatsby": "^1.9.277",
"gatsby-link": "^1.6.46",
"gatsby-plugin-feed": "^1.3.25",
"gatsby-plugin-google-analytics": "^1.0.31",
"gatsby-plugin-offline": "^1.0.18",
"gatsby-plugin-react-helmet": "^2.0.11",
"gatsby-plugin-react-next": "^1.0.11",
"gatsby-plugin-sharp": "^1.6.48",
"gatsby-plugin-typography": "^1.7.19",
"gatsby-remark-copy-linked-files": "^1.5.37",
"gatsby-remark-images": "^1.5.67",
"gatsby-remark-responsive-iframe": "^1.4.20",
"gatsby-remark-smartypants": "^1.4.12",
"gatsby-source-contentful": "^1.3.54",
"gatsby-source-filesystem": "^1.5.39",
"gatsby-transformer-remark": "^1.7.44",
"gatsby-transformer-sharp": "^1.6.27",
"lodash": "^4.17.10",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-helmet": "^5.2.0",
"react-hover": "^1.3.2",
"react-popper": "^1.0.2",
"typeface-roboto": "0.0.54"
},
"devDependencies": {
"eslint": "^5.3.0",
"eslint-plugin-react": "^7.10.0",
"gh-pages": "^1.2.0",
"html-webpack-plugin": "^3.2.0",
"prettier": "^1.14.2",
"webpack": "^4.16.5",
"webpack-command": "^0.4.1",
"webpack-dev-middleware": "^3.1.3",
"webpack-dev-server": "^3.1.5"
},
"homepage": "https://github.com/gatsbyjs/gatsby-starter-blog#readme",
"keywords": [
"gatsby"
],
"license": "MIT",
"main": "n/a",
"repository": {
"type": "git",
"url": "git+https://github.com/gatsbyjs/gatsby-starter-blog.git"
},
"scripts": {
"dev": "gatsby develop",
"lint": "./node_modules/.bin/eslint --ext .js,.jsx --ignore-pattern public .",
"test": "echo \"Error: no test specified\" && exit 1",
"format": "prettier --trailing-comma es5 --no-semi --single-quote --write 'src/**/*.js' 'src/**/*.md'",
"develop": "gatsby develop",
"build": "gatsby build",
"deploy": "gatsby build --prefix-paths && gh-pages -d public",
"fix-semi": "eslint --quiet --ignore-pattern node_modules --ignore-pattern public --parser babel-eslint --no-eslintrc --rule '{\"semi\": [2, \"never\"], \"no-extra-semi\": [2]}' --fix gatsby-node.js"
}
}
Also tried to:
delete node_modules then npm install;
uninstall "webpack-cli": "^3.1.0" and install webpack-commander;
uninstall extract-text-webpack-plugin that seemed to be complained about in terminal;
Any ideas comrades?
Have you been experimenting with Gatsby v2? Your package.json shows React v16, which is a peerDependency of Gatsby v2, but not of Gatsby v1. In Gatsby v1 (which is what you have in package.json) you should not install React directly, it's installed as a dependency of Gatsby.
Webpack is also (both v1 and v2) a dependency of Gatsby. I don't think you should have it in package.json as a top level dependency.
I would recommend starting with a clean Gatsby starter, then copying your gatsby-node.js, gatsby-config.js, components, content, etc, into that project. Leave the package.json file. Then run npm install --save for every package that you explicitly import or require. Hopefully that gets you back to a working site.
Sidenote, personally, I would also recommend yarn over npm.
Gatsby clean-cache
Then delete node modules
and then
yarn start/npm install

Resources