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
Related
I'm running a MEAN stack webapp on Heroku. I have two folders at root level, "frontend" and "backend". Each folder has their own package.json. I have built the Angular app and put it in the "backend/public" folder. I can serve the Angular app from Express and deploy it to Heroku, no problem.
And here is my doubt: the Angular code in the frontend folder has its own dependencies, but when I build the app, run it on Express, or deploy it to Heroku, is it still using those dependencies from the node_modules folder in the frontend folder? Or are these dependencies somehow injected into the built Angular app's minimized code sent to the backend/public folder, for example?
I'm having trouble finding any info on this specific doubt.
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 made a website with Vue.js and included Snipcart API for a buy button. I've been trying to deploy it to heroku for 2 days now.
When I enter $ npm run dev it works fine and will display my web app. But for some reason if I do $ node server.js it shows the default Vue welcome page for its webpack ("Welcome to Your Vue App").
I've tried entering "start":"npm run dev" in my package.json but that just results in a forever loading web page. If I enter "start":"node server.js" It results in the same thing as the previous paragraph, it just shows the default Vue welcome page.
I found someone with basically the same issue (How to set up vue(2)-cli app to run with nodejs server) and even tried the same tutorial post but I don't know what that comment/answer is talking about. I am also unsure of how to deploy a static website with a Snipcart API (as a previous user mentioned to me in a previous post).
I am really at a loss as to what to do. Thanks for your time.
Edit: Here is the repo for my app: https://github.com/Taikon/MaroonRiver0
Exactly what I suspected in the comment: You are not building your assets.
Run
npm run build
node server.js
And it should work as expected.
I am starting a new project which is using Angular 4 for frontend designing and the application will need some rest api's for which I have decided to use node. I am using angular cli for creating angular app and I know how to create angular app and node server but I want to know how will I connect these two things such that when I do ng serve both the server and angular app gets compiled and run. What basic changes in the project structure or some file is needed to be done?
I'm currently building a full-stack Angular app with a Node/Express backend and was wondering the exact same thing. However, despite what that scotch.io tutorial tells you, creating both the Express server and the Angular app in the same directory is NOT the best way to go about it.
What you want to do is set up your Express server in one project and serve it in one terminal window, then serve your Angular app in a separate terminal window but have it point to your locally-running Express server instead of the default dev server that's included with the Angular CLI (the ng-serve command).
Here's a Stack Overflow answer and also a Medium article that answered all of my questions for how to set this up (fortunately, it's not too hard).
Here's what I did Shubham. I went into the Angular-Cli and changed "outDir": to "../public"in other words it will look like "outDir": "../public". The ../public folder is my Express static folder set in my app.js file with app.use(express.static(path.join(__dirname, 'public')));
Keeping in mind I have nodemon installed globally, and in my package.json file, "start": "node app" I simply run nodemon from this dir to start my server and both Angular and Express run on the same server.
I have seen some people say it's not good to run static filed on the Node/Express server, but for development I'm not sure it matters. Although I'm a novice when it comes to js frameworks etc. Here's the project files on my github acct: https://github.com/chriskavanagh/angularauth.
Edit: You must run ng-build (in your Angular dir) whenever you change code.
First, in Angular project do ng build, it will create dist folder (static folder).
Second step, paste the following code in backend servers entry point file.
app.use(express.static(path.join(__dirname, 'dist/')));
app.get('*', (req, res) =>{
res.sendFile(path.join(__dirname, 'dist/index.html'));
});
And after the above thing is done run backend server: node filename
Note: in give proper path where your index.html file is located in dist folder.
The node server and the Angular app are two different things.
In order to run the node server you should use the command:
node ServerName.js
In order to run the angular app you should use the command:
npm start OR ng serve
In your case, the connection between the two is made by http requests.
For example you could use 'express' in order to implement rest services in your node server and then send an http request to the server in the current route.
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