I am developing a NodeJS app that uses React on the front end. My folder structure is:
root -
- client (React App)
- api (express server)
My git folder is in the root folder for pushing the entire project to GitHub throughout development. But does my repo need to now be initialized in the api folder? Or is there a way to tell Heroku that the application is in the api folder?
Error on Heroku:
Build failed
There was an issue building your app. Please ensure your app is deployable to Heroku and try again.
! No default language could be detected for this app.
HINT: This occurs when Heroku cannot detect the buildpack to use for this application automatically.
See https://devcenter.heroku.com/articles/buildpacks
! Push failed
Also I feel it's worth mentioning that I set up the auto deploys in the Heroku GUI. So, it is attempting to build. I also have a Proc file and an app.json file.
app.json
{
"name": "Craig Bauer | Portfolio",
"description": "My web portfolio built as a MEAN stacjk app",
"repository": "https://github.com/craigbauerwebdev/Portfolio",
"logo": "",
"keywoeds": ["node", "react", "portfolio"],
"image": "heroku/nodejs"
},
{
"buildpacks": [
{
"url": "https://github.com/heroku/heroku-buildpack-node.js"
}
]
}
Procfile
web: node app.js
Thanks in advance
I found this solution and just wanted to share.
My entire production application is now in the api folder. This command worked well for me.
git subtree push --prefix api heroku master
For future projects I will structure this differently so I won't have to copy the build before each deploy.
Related
I have an app using React Native as its frontend, and NodeJS as backend, and it also has a cloud MySQL instance. I want to deploy the app to the public and show it to someone as demo using Heroku or maybe other hosting services.
I want to publish my React Native App with Expo, but am not sure how/ where to host my nodeJS server so that the mobile app can access it.
Steps for deploying React native/expo app to heroku:
1: set heroku buildpack as static: >heroku buildpacks:set heroku-community/static
2: Add static.json for static buildtype: { "root": "web-build/", "routes": { "/**": "index.html" } } More settings here: https://github.com/heroku/heroku-buildpack-static#configuration
3: npm run build (package.json: "build": "expo build:web") --> Creates web-build folder
git add .
git commit
git push heroku master
heroku open
You can follow Heroku official document to deploy your NodeJS server.
https://devcenter.heroku.com/articles/deploying-nodejs
Then you can access the domain provided by Heroku just exactly like on your localhost.
I can run the app locally without any issue by yarn start command. here I have provided photographs which represent my problem. I googled and noticed several people faces the same problem. but their context is different.
By default, Now publishes your files as a static directory. You can add a builder to your now.json file to tell Now how to build and deploy your site.
In a case where app.js contains a web server application, your now.json might look like this:
{
"version": 2,
"name": "my-project",
"builds": [
{"src": "app.js", "use": "#now/node"}
]
}
This tells Now to use the #now/node builder to generate a lambda that runs app.js to respond to requests.
If your app is purely js+html to be run on the client machine, you wouldn't need the lambda, but you can still build the source before deploying it as static files with #now/static-build.
Check out the Now docs for more info: https://zeit.co/docs/v2/deployments/basics/#introducing-a-build-step
I am trying to deploy a Rails 5 api with an Angular 2 front end, with the Angular code living an frontend folder inside of the main Rails project.
I was able to deploy using this tutorial (https://www.angularonrails.com/deploy-angular-2rails-5-app-heroku/), and specifically this custom Heroku buildpack (https://github.com/jasonswett/heroku-buildpack-nodejs/stargazers).
While this buildpack is absolutely awesome for existing, I am a little uncomfortable depending on the custom implementation in the long run. It also means I have to rename my frontend folder to client.
Is there a way to use the main Heroku Node buildpack, and somehow pass the path of my Angular frontend folder as an ENV variable? How would I go about doing this?
I've read through the Github conversations here (https://github.com/heroku/heroku-buildpack-nodejs/pull/192) and here (https://github.com/heroku/heroku-buildpack-nodejs/pull/203) but can't make heads or tails of it.
Please help!
the trick is to place a package.json at root with the following:
{
"scripts": {
"postinstall": "cd frontend && npm install"
}
}
substitute "frontend" with whatever folder the angular / node app is in.
See github issues discussion here: https://github.com/heroku/heroku-buildpack-nodejs/issues/323#issuecomment-227520485
I'm reasonably new to node, git, github and Heroku and I'm struggling to work out the best way of sending my application to Heroku without cluttering up the repo with my compiled, minified app and without doing too much in Heroku.
My node.js project looks a bit like this:
- client
... code
- server
... code
- node_modules
- package.json
- gulpfile.js
- dist
- client
- server
Everything apart from node_modules and dist goes into github.
The gulpfile compiles, minifies and concatenates everything ready for release in dist.
How do I push just the dist folder to Heroku, without also putting it into github? What is best practice? I'd rather not send my gulpfile to Heroku as it means moving the devDependencies in package.json and using a post update script, as it ties the project to Heroku more than I'd like.
Reasons for not using post hook are summed up well in these two posts: https://stackoverflow.com/a/15050864/344022 & https://stackoverflow.com/a/21056644/344022, unfortunately they don't provide an easy to understand alternative.
Heroku now has a static buildpack in development to handle this (see https://github.com/heroku/heroku-buildpack-static)
Create a static.json file to use the files from dist/ with .html suffix and to re-route all calls back to the SPA
{
"root": "dist/",
"clean_urls": true,
"routes": {
"/**": "index.html"
}
}
Extend package.json scripts to ensure dist/ directory is built, for example
"scripts": {
...
"heroku-postbuild": "gulp"
}
So that dev dependencies from package.json get installed
heroku config:set NPM_CONFIG_PRODUCTION=false --app
Multiple build packs so you can build and deploy
heroku buildpacks:add heroku/nodejs --app <app_name>
heroku buildpacks:add https://github.com/heroku/heroku-buildpack-static.git --app <app_name>
Your procfile can be empty in this case.
I had the same problem of pushing only the dist folder to heroku app, Right now I am using a different approach, not sure the idle one, but it works for me. I created a deploy file and added the below code
import {spawnSync} from 'child_process';
function deploy(){
options = {
cwd: path.resolve(__dirname, './dist')
};
//push dist folder to deploy repo
console.log('Initialising Repository');
spawnSync('git',['init'],options);
console.log('Adding remote url');
spawnSync('git',['remote','add', remote.name, remote.gitPath],options)
console.log('Add all files');
spawnSync('git',['add','.','--all'],options)
console.log(`Commit with v${version}`);
spawnSync('git', ['commit','-m',`v${version}`], options)
console.log('Push the changes to repo');
spawnSync('git', ['push', '-f', remote.name, 'master'],options)
}
kept repo iformation in package.json and read here, I am running this after a webpack build task. So this will push my new build to heroku. Even if the .git inside dist gets deleted it will take care of it.
Go on, set up a post hook on heroku which builds you app and copies the files to where they'll be served. This is fairly normal practice, and once it's set up all you need to do is a git push to deploy your app, which is really rather handy. The alternative is to have a separate repository which you manually copy the files to and push from, but that doesn't seem as slick to me, greater chance of human error by messing up the dependencies, or forgetting to delete generated files which are no longer needed etc.
I wish tho host my HTML5 application on Heroku. But I must choose one of the platforms (Java, Python, Node.js, etc) for my app. How can I run my application under Node.js? I have been able to create and deploy a simple Node.js app in Heroku however I am yet to figure out how can I merge my HTML5 app into this Node.js app.
I hope I make sense.
Tanks
"HTML5 app" is very non-descriptive and generic. If you mean an entirely client-side HTML application with no real backend logic, than that's trivial with node.js on heroku. If you put this in the root of your git repo in a file called server.js:
var app = require('express')();
app.use(express.static('app'));
app.listen(process.env.PORT);
Then put all of your HTML5 app in a directory called 'app' and node will serve it up.
Also in the root of your repo you'll need a Heroku Procfile with the following:
web: node server.js
Finally, you'll also want a package.json in the root of your repo so that Heroku can install your dependencies:
{
"name": "my-app",
"description": "My application",
"version": "0.0.1",
"dependencies": {
"express": "3.4.0"
},
"engines": {
"node": ">=0.10.0"
}
}
you can use ruby as well. rack based app Heroku rack based app
You need to create a config.ru file and put your HTML content into public folder
Here are more details about creating a static site based on rack app. Creating Static Sites in Ruby with Rack
Hope this helps!