I've been trying to make a server that can visualize music (This is what I have so far). That's been successful but I want to try and make it work with youtube videos, and I've found a lot of repositories on github for youtube video to audio conversion that make this reasonably doable, but in order to deploy a server on heroku that can host temporary audio files of youtube videos in the format that I want, I'd need to include ffmpeg in a buildpack and I'm not sure how to go about doing that. This is the heroku buildpack for node.js but I don't really understand how it works.
TL;DR: What steps would I need to follow after forking the heroku-buildpack-nodejs repository on github in order to successfully deploy a node.js server to heroku and run this code?
var conversionProcess = child_process.spawn(
'ffmpeg',
['-i', 'some_youtube_audio.mp3', 'some_youtube_audio.webm'],
{
cwd: __dirname + '/tmp'
}
);
The documentation for this function is on the node.js API, by the way.
you should use the multipack https://github.com/ddollar/heroku-buildpack-multi
then use the node buildpack as well as an ffmpeg buildpack https://github.com/jonathanong/heroku-buildpack-ffmpeg-latest
Related
Following a course on Nuxt, I have chosen the SSR route when creating this application, separating admin, client and server into their individual files. This is the file structure:
- amazon-clone
- admin
- client
- server
The course material does not cover pushing to git or deploying to Heroku.
I have followed the steps as per Nuxt & Heroku docs, however because each file will have its own package.json and nuxt.config.js I am under the impression this will not work. As Heroku will expect a package.json in the root folder?
What is the best practise for deploying an app to heroku when client, server and admin are seperated?
The repository: https://github.com/TomBell95/amazon-clone
Heroku deployment steps:
Procfile: web: npm start
package.json: "heroku-postbuild":"npm run build"
"engines": {"node": "14.x"}
heroku buildpacks:set heroku/nodejs
heroku config:set HOST=0.0.0.0
heroku config:set NPM_CONFIG_PRODUCTION=true
I have found similar questions however nothing Nuxt specific (e.g. How to push both the client side and server side project folders together as a one project (api + front end) on github?).
I really don't see the purpose of having all of those 3 separate.
Never saw this kind of project structure and tbh, I don't even know how to host it properly.
At the end, there is a backend on this. So, you could probably split the backend (host it on Heroku) and the frontend (split it on the frontend). If you're learning Nuxt, this is probably not the way to go because it's not using a common structure from the start.
I can recommend:
Nuxt.js - Vue.js on Steroids, I took this one a while ago, it's done by Max, he is a great teacher and does a lot of great content
Mastering Nuxt is done by a Nuxt Ambassador and his team. It's very complete and plenty of good practices
Those are good resources that you can follow, which are well-known and good.
I want to host my app outside of node JS, but I want to use .vue files and possible npm as build system (if it's needed). Is it's possible to do?
I do not need any backward compatibility and if it work on latest Chrome dev it's ok for me.
Is there any examples how it can be done?
I tried to build some webpack template, but it's work only inside NodeJS. On other server I am getting 404 when I am accessing to URLs that placed in .vue files. It's seems that they can't be handled by the other server.
VueJS app is not NodeJS app.
VueJS app is interpreted by the browser.
You just have to build your app on computer and host files as any static website, so any server can serve html and files.
To build your app use e.g. Webpack (https://github.com/vuejs-templates/webpack )
NodeJs only use to build *.js files in front-end, your WebApp dosen't have to run on Nodejs.
1, You can create a index.html file that requires *.js file when webpack built it.
2, Use Chrome to open your index.html file so you can see it works.
You don't need to use vue-cli or other servers if you only want a static page.
But you have to know how to set your webpack.config.js, you can look that doc https://webpack.js.org/guides/getting-started/
Your starting point is wrong. Vue + node.js can build a complete site. Vue is the front-end framework, node's server language. The two can be used in combination. But not vue must rely on node to use. The two of them can be perfect to achieve the front and back separation of the development model.
In projects that use vue, individuals do not recommend configuring webpack and vue-loader separately. You can directly use vue official scaffolding, vue-cli. Do not have to consider these configurations, automatically configured.
Vue-cli
If you just started learning Vue, here's an entry-level demo. Although it is only a small application, but it covers a lot of knowledge points (vue2.0 + vue-cli + vue-router + vuex + axios + mysql + express + pm2 + webpack), including front-end, back-end, database and other sites Some of the necessary elements, for me, learning great significance, would like to encourage each other!
Vue Demo
Best way to develop Vue app is run dev server, and after all just build static assets. You don't need use vuex files, even better is use static template because you can easily integrate it with some back-end (WordPress or whatever).
Helpfully will be use some starter, for ex. Vue.js starter
It's true that vue will create static html pages when you run the build script. However, you will need to serve the files from a small server for the site to work. If you notice, when you run npm run build, the terminal will print a notice...
Tip:
Built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.
You can create a simple http server in your /dist directory with express and then host your site somewhere like Heroku.
Take a look at this article https://medium.com/#sagarjauhari/quick-n-clean-way-to-deploy-vue-webpack-apps-on-heroku-b522d3904bc8#.4nbg2ssy0
TLDR;
write a super simple express server
var express = require('express');
var path = require('path');
var serveStatic = require('serve-static');
app = express();
app.use(serveStatic(__dirname));
var port = process.env.PORT || 5000;
app.listen(port);
console.log('server started '+ port);
add a postinstall script in a package.json within /dist
{
"name": "myApp",
"version": "1.0.0",
"description": "awesome stuff",
"author": "me oh my",
"private": true,
"scripts": {
"postinstall": "npm install express"
}
}
push only your /dist folder to heroku after you've compiled your site.
proof: I've followed these steps to host my vue.js project
using vue files without NodeJS (nor webpack) is possible with vue3-sfc-loader.
vue3-sfc-loader
Vue3/Vue2 Single File Component loader. Load .vue files dynamically at runtime from your html/js. No node.js
environment, no (webpack) build step needed.
vue3-sfc-loader will parse your .vue file at runtime and create a ready-to-use Vue component.
disclamer: author here
Could you try something as simple as an S3 bucket setup for web serving? How big is your project? How much traffic do you think you'll get? If it's very small, you may be able to host on S3 and use webpack, etc.
I'm trying to deploy my Django app on Heroku, that makes use of the Blockchain.info API V2 (https://github.com/blockchain/service-my-wallet-v3) and thus needs to run blockchain-wallet-service in the background, which in turn needs Node.js and npm installed.
On localhost, I have used this API successfully by running the service on my own machine, but I'm having trouble deploying to Heroku. Firstly, I assume I will need to run the service on a separate dyno, and that I will need node and npm installed on my instance.
Can someone tell me how to achieve this? I'm new to more advanced features of Heroku, I've tried to use the nodejs buildpack but I doubt this is the correct way. There is also this: https://elements.heroku.com/buttons/kmhouk/service-my-wallet-v3 which I've deployed as a separate app but I've failed to merge it in some way to my Django app.
Any help is much appreciated!
I had this exact same issue, bro, and i finally got some light in the end of the tunnel.
I've cloned the https://github.com/blockchain/service-my-wallet-v3 repository and deployed it to heroku and made some changes on "package.json" file. The problem is that (in heroku) you need to declare the dependencies on package file. I've added these lines:
"dependencies": {
"blockchain-wallet-service": "~0.22.4",
}
and a script to test in the deploy:
"scripts": {
"postinstall": "blockchain-wallet-service -V"
}
Also, by cloning this repository, i needed to add this line too:
"license" : "(ISC OR GPL-3.0)",
hope it works for you
I've been using 'yo express' command and choose MVC , jade , grunt ....
Everything is working fine and now I'm managing to deploy my app.
Now I only know two commands to start my app
grunt
node app.js
If I run "grunt" command on my production server , it will enable livereload server , which is good for development but not production.
I think maybe grunt can help me to do optimization but I couldn't find it. I saw webpack is a good choice but it's too difficult for me to use it.
Is there any way to do optimization ( like compress js css ) or other tasks for deploying on my 'yo express' generated app?
Thanks.
Normally there is no need to minify your server side js file because this only reduced the loading time for the browser which here isn't the case. To run nodejs in productin you could look at a a process manager like pm2. To build your client side files for production you might have to extend your grunt setup by yourself or use a second yo generator for your frontend part of the application.
Struggling to go from local development to deploying my web app. using ffmpeg in node to crop things. tried following this guide to deploying ffmpeg, https://github.com/HYPERHYPER/heroku-buildpack-ffmpeg, and how the binary needs to be in a buildpack. Achieved this, but it still doesn't work. How do i reference the buildpack?
is is something to do with this line?
.setFfmpegPath('./ffmpeg')
var fileName = './new_crops/' + videoTitle + '.mp3';
var process = new ffmpeg({
source: videoGrab
})
.setFfmpegPath('./ffmpeg')
.audioBitrate(info.formats[0].audioBitrate)
.withAudioCodec('libmp3lame')
.toFormat('mp3')
.outputOptions('-id3v2_version', '4')
.outputOptions('-metadata', 'title=' + title)
.outputOptions('-metadata', 'artist=' + artist)
thanks in advance
Try removing the ./ from the ffmpeg path. According to the buildpack documentation, the app is installed in the server path, so it's globally available.
The full path where the executable is located is /app/vendor/ffmpeg/bin.