This is my file tree containing a folder for my Vue app (client folder) and my NodeJS server (server folder).
When I try uploading to Heroku, I get an error saying that no matching buildpacks could be found, and that's I believe due to my source folder not having a package.js and that being because I have one in the client and server folders.
So how can I accomplish deploying both my client and server-side in one Heroku app, or would I need to split my whole app in one Heroku Front-End App and one Heroku Back-End App?
I'm sorry for such a stupid question, but I am really confused on how to put my app live, since it's finally finished after a month of work.
No Buildpack found while deploying to Heroku .. When I try uploading to Heroku, I get an error saying that no matching buildpacks could be found, and that's I believe due to my source folder not having a package.js
Correct, this error "no buildpack found" happens because Heroku looks at (only) your root directory and cannot determine what language/framework you are using.
The package.json file defines the dependencies that should be installed with your application. To create a package.json file for your app, run the command npm init in the root directory of your app.
https://devcenter.heroku.com/articles/deploying-nodejs#declare-app-dependencies
I'd recommend reading the heroku node docs and deploying a "hello world" application first, as a learning experience. You'll also want to read about the Procfile.
Deploying a client-server application to Heroku is quite common, all rails apps work this way (a single deploy). But, for node apps, there are many different ways to deploy, and there is no official (documented) way to organize your code, AFAIK.
Related
I'm trying to get my app and server hosted on Heroku to work when deployed, but it's not. Client and server seem appear to be running, but the api calls are returning 404s. I'm guessing the configs are messed up somewhere.
Here is my repo: https://github.com/kpermenter/test-deploy and my Heroku settings are attached.
Any insight would be much appreciated!
This is because you haven't made the client files available publicly, you can do this by using:
app.use(express.static('../client/build'));
in the server.js file
if this doesn't work you can try creating a 'public' folder inside the server folder then copy the contents of the build inside the server/public folder and then use app.use(express.static('/public'));
and just deploy the server folder itself
I want to deploy my project using the Heroku service.
My project contain client and server folders.
On localhost everything is working fine but when I followed the Heroku instructions, I still couldn't deploy my project correctly. I followed this instructions only for the server (I added only the server files), but when I open the given URL of my
Heroku project I receive the wild card (*) msg: Page not found
I couldn't understand what im doing wrong.
client script in package.json:
server script in package.json:
Axios file in client folder:
index.js in server folder:
updated - procfile:
I added the .env variables into the Heroku config vars.
This is the first time I'm trying to deploy my project and I will appreciate your help :)
I currently a web app involving a Vue.js frontend with a Flask backend acting as a REST API. They are divided into the client and server folders in my repo, respectively. I am looking to deploy it to Heroku via the Github deployment feature but am running into some errors and questions I need clarified.
All code can be found in this Github Repo: https://github.com/justintranjt/thrive-test
In development, I have been running the application like so:
In one terminal run thriveApp.py. In another terminal run npm run dev. Navigate to localhost:8080 which is the local server running
the Vue.js application.
Is this how the application will be run on Heroku? Or is the Vue application run using npm run build? In that case I would have to take the produced build folder and serve it in the Flask application, correct?
In addition, some of my links between the frontend and backend specify localhost:8080 and localhost:5000 (8080 is Vue and 5000 is Flask) which work locally. But will this work when deployed to Heroku?
<b-form>
<b-button variant="primary" href="http://localhost:5000/loginPage">Login via CAS</b-button>
</b-form>
As you can see here, I have a button in my Vue application that links to a login page routed by my Flask application. Will I have to change the portion of the URL that says localhost:5000 when running on Heroku?
Finally, When I currently try to build the application on Heroku only the Python portion of the code is recognized as modules from the Vue app specified by package.json are not installed while plugins for Python specified by requirements.txt ARE installed by Heroku.
I have a feeling all of these questions are generally related to each other. Any other advice or tips regarding Heroku deployment would also be helpful as I'm quite confused about deployment at the moment.
Is this how the application will be run on Heroku?
No! npm run dev spins up an entire development server with vue in dev mode and hot reloading. That's a lot of overhead, especially when it comes to file sizes.
Or is the Vue application run using npm run build?
Kind of. Vue doesn't need to run on your server at all, it's all client-side. npm run build bundles and minifies your files to a dist folder, you'll be left with only html, css and javascript - this is all of the frontend code that needs to be on your production environment - no need to deploy any of the source files. All you need to do is serve those static files from any server. This could be done by your flask, or just any apache, nginx etc.
But will this work when deployed to Heroku?
That will be very tricky to setup. It's one of the reasons why I would not deploy front- and backend on the same (virtual) server.
modules from the Vue app specified by package.json are not installed
If you deploy your bundled frontend instead of the source code this wont be an issue anymore. I still recommend serving the frontend from a different environment.
I have an application using Node.js with Aurelia on the front-end, which I want to deploy on Heroku.
To run the app locally, I need to execute following commands:
1. npm start
2. cd public > gulp watch
After installing heroku-cli, tried publishing it using git push heroku master.
The problem is, Heroku only runs npm start when it's deploying the app on cloud. So it is able to start the server.
However, it doesn't know anything about cd public and gulp watch.
My question is, how can I tell Heroku to change directory to public and execute gulp watch command, once it has started the server?
Edit:
I forgot to address an important point. Since you only mentioned Aurelia in your question, I (wrongly) assumed that that's all you had.
Ultimately, for a production app you'll want to have a proper webserver hosting your Aurelia app.
Example:
For Aurelia apps I've built, I typically have 3 distinct processes running, each with their own port (or hostname):
IdentityServer
ASP.NET Web Api
OWIN FileServer
The third one is what hosts my Aurelia app as a static bundle.
There is no gulp or anything like that involved here. The server doesn't even have npm installed and sees it just like any other server-side application. And that's exactly how I deploy it; no node-related commands needed.
If you're using nodejs for your server-side stuff, use http-server to serve the static bundle.
When you host your aurelia app within your own serverside application you get the added benefit of being able to send some bootstrapping configuration directly along with the bundle, so you don't have to hard-code urls and such.
That's what I implied with "don't host a static site on heroku": bundle it up, and let your web application host it. My original answer would only apply if there is no server-side stuff involved.
Original answer:
It's generally not recommended to host static sites on heroku, see this blog post. The bottom line is that Aurelia sites are static, and a static site doesn't need an app server. It's unnecessarily expensive and doesn't have as good distribution as most CDNs do.
With that said, if you insist on hosting a static Aurelia site on Heroku then your best bet is to combine all your script calls into a single call which, as you say, already runs. So make your npm start script call gulp watch.
You'd probably want to npm install your dependencies and call ../node_modules/.bin/gulp watch instead of calling gulp globally.
When it comes to Heroku however, gulp watch in itself probably won't work because that will start a development server which will have no port binding in Heroku. It will run, but it won't be accessible from the outside.
gulp watch is not something you want to run on a server anyway because it will watch for file changes (which never happen there) and run things like browsersync which will be useless. Just bundle your app and start a normal http-server or better yet, upload the bundle ready-to-start into the correct folder and you're done.
You want to build your app and then deploy as if it were a fully-compiled, static application. With Aurelia CLI, that would be au build --env prod and then copy the scripts folder, index.html, and any dependencies like css, fonts, etc. to a separate folder. gulp build works the same way.
From there, you will publish the compiled app to Heroku as shown in this medium.com article:
https://medium.com/#winnieliang/how-to-run-a-simple-html-css-javascript-application-on-heroku-4e664c541b0b
The main part of the article is below, but here is the kicker - you are "tricking" heroku into thinking it is a PHP app. Serious!
Head to root directory of the repo that contains index.html which dictates the main HTML page.
Run touch composer.json to create a file called composer.json.
Add the following line: {} inside.
Run touch index.php to create a file called index.php.
Add the line: <?php include_once("index.html"); ?> inside.
Now update the repo on Github if it’s connected to your account or Heroku command git push heroku master . Wait for the automatic deploy to work its magic and tada!
There are some other steps to make your compiled app into a repo (ie, git init) but this should work for you. It did for me.
I built a Meteor app, and it runs on my local machine, where I have meteor installed.
I have never deployed an app online, and am trying to put the app on heroku.
I first tried to use buildpack/jordansissel/heroku-buildpack-meteor.git, but I got an error "Meteor requires Node v0.10.41 or later"
I then tried to use buildpack/michaltakac/meteor-buildpack-horse.git but it failed to push because it couldn't unpack Node.
Lastly I've tried kevinseguin/heroku-buildpack-meteor.git but I get lots of warnings about npm depricated http://prntscr.com/bewzak
When I look at the logs it says "Slug compilation failed: failed to compile Node.js app"
I also get Error: MONGO_URL must be set in environment
I don't know enough to understand what the errors are, or how to get my app deployed
Image of errors: http://prntscr.com/bex0av
my goal it to get the site on gr-fireworks.herokuapp.com
I contacted Heroku helpdesk and they said they couldn't help me because the issue was outside the scope of Heroku Support.
I tried to reach out to Snap CI who said they were successful in deploying it, but when I try to type in exactly what they did, I am still getting the error about Node https://snap-ci.com/ankitsri11/Fireworks/branch/master/logs/defaultPipeline/1/Heroku?back_to=build_history
My repository I'm trying to deloy is on git at github.com/jschwarzwalder/Fireworks
From description of your problem I can conclude you need to do 2 things on your app's Heroku dashboard (Settings tab):
Add MONGO_URL environment variable that points to your Mongo DB database. You can create mongo instance on external service or use mLab Heroku addon (it has free plan).
So your environment variables may look like:
Also, you may need to add METER_SETTINGS if you use --settings settings.json and ROOT_URL - URL of you app gr-fireworks.herokuapp.com (is required).
Set this buildpack:
Ensure you have .git at the end of url.
Now you can deploy your app using single command (if you setup Heroku Toolbelt and heroku remote points Heroku's app repository):
$ git push heroku master