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.
Related
I'm trying to deploy a node application with aws via Elastic Beanstalk. The deployment is showing as successful, but when opening the webpage I receive the error message Cannot GET /.
My general project structure looks like this:
client/
server.js
Where client/ is a react application built using create-react-app and server.js is where express app.listen is defined.
I connected the frontend to the backend in the development environment using "proxy": "http://localhost:5000" in the react app's package.json.
I also added "homepage": "my-aws-url.com/client" to the react package.json since it isn't stored at the root level of the project.
Do I need to do something with the proxy in production similar to what was done in the development environment, or are there other things I'm missing?
So I'm deploying a MERN stack app to heroku, and I have two .env files. One is for the nodejs backend, and one is for the react frontend. In heroku, you can set environment variables but they act essentially as a .env file in the root directory. However, my client folder is nested inside the node.js
If you're using react-scripts, you just need to preface any React env variables with REACT_APP_. This is how it knows where they belong when it is building your app. So just add them to your code and to the config vars on Heroku as REACT_APP_NAME_OF_YOUR_ENV_VAR and you should be good.
Here's the docs from Create React App on how to do it using react-scripts and adding the env variables and here it is for Heroku
I would like to deploy my angular application with nodejs, mongo, express js on my own server.
My way is:
-> ng build --prod (output is dist folder)
-> ng serve on dist folder
Start backend:
-> node server js file
But I think, it is not correct way od production stage. Added http server on express, there I create another index html view file with hbs, and there I use:
<body>
<my-app>Loading ...</my-app>
<script src="/dist/bundle.js"></script>
</body>
But on dist server, there is multiple js files.
How can I create using ng option (no webpack or must be f.e. webpack?) my angular/mongo/node/express application (in 1, my own server, no aws, heroku, github etc). There is any correct way to do it?
I've been able to deploy an angular app using Caddy Server as the webserver.
Create a build of your Angular code by doing ng build --prod-true.
This creates a set of bundled Js and Html files in the dist
directory.
Copy these files to where you want to run the app.
Next go to the Caddy website and download the version of Caddy for
your os. You can choose all kinds of features but for my deployment
inside a firewall a plain build worked fine.
Drop the caddy file in the directory that you put your compiled
angular code.
Create a caddyfile (just a file named caddyfile), add localhost:(your
favorite port number).
Run caddy and it will automatically serve your app by launching
index.html. You can view your app at localhost:port.
No messy node installation. Caddy has all sorts of add-ons to deal with more complicated scenarios but the deployment is caddy.exe, caddyfile and your built code.
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 currently trying to deploy a hapi.js app to heroku with this file structure:
.git
client
server
The hapi.js server is inside the server folder along with it's package.json file, node_modules and all that stuff.
Inside the client folder, I have all the front-end related things (small angular app with bower_components and a gulp script to inject everything). The server.js from /server is serving both the bower_components and the angular app related files.
My current problem is that, obviously, Heroku doesn't find a way to deploy my app because of its structure, since it needs to have the server and package.json on the root of the project (which i'm trying to avoid at all costs).
So far I tried to put on my Procfile the following:
web: node server/server.js
but unfortunately it didn't let me push because it didn't match any of its buildpacks.
Have you add .bowerrc file
.bowerrc file contains
{
"directory": "client/bower_components"
}
and add bower.json in root.