How to Integrate angular cli project with nodejs/expressjs project - node.js

I have 2 projects, as shown in the following images.
The Node, and Express project is in the root folder, and the Angular CLI project inside of angular-src folder.
I can run each project individually, back-end on port 3000 with node app.js and front-end on port 4200 with ng serve
What is the best way to integrate both projects, and the easiest in deployment?
Full Project Folder
Full Project Folder with angular src files shown

Most people keep their frontend (fe) and backend (be) in separate repos. This makes sense when you think that you can have multiple fe's for a single be.
However, its often easier just to keep them in the same repo. Then when you deploy you only need to clone one repo.
Also, it depends what route you do down. Will you installed Node.js etc on your server or will you go down the docker route?
People often like to use docker to containerise their fe and be. The benefit of this approach is that you only need one dependency installed on each server you deploy too, that is docker itself. Everything else exists in the docker world.
Also, docker makes it easy to docker pull from any server. If things go wrong, just kill your docker container and spin up a new one (assuming your data would not be lost in doing so, not a worry for the fe but a be concern).
Obviously, there is the docker learning curve but it's not too painful.

Related

Should I bundle my Express server code to run node on the bundle, rather than my unbundled app.js with tons of requires?

Two questions, all related to bundling. First server, then client.
Typically, I wrote my Express server code, using an app.js file to setup my express server, setup logging, routes, etc. I also ran tests against the functions associated with the routes.
When deploying my server code to AWS, I would push the code and a git hook would build the project by doing an npm install, run my task runner to bundle client files and to copy files to their dist directories.
For my client side code, I used to use browserfy, then moved to webpack to bundle all my client code to a single bundle or main.js.
I'm looking at using rollup now and appreciate its' ability for tree shaking.
As I'm now setting up a new project, I have a few questions/concerns:
Should I also bundle on the node/server-side? Is it more efficient for the server to run against an optimized, tree shaken, server bundle? Or once node interprets my unbundled app.js, it's pulled into memory along with all the require files and would run similar to the same bundled/tree shaken version.
I currently deploy code to an aws server via a git push. That push triggers a full build server side, moves client files to dist directories and starts the nginx and node servers. Should I instead run the build process locally and only push dist files to the server? Thinking about a CI/CD process, I'm thinking no... but it could happen... But is it worth it? Depends a lot on answer 1, and maybe some hybrid approach.
Maybe someone could outline their production deploy steps at a high level? I can also talk more on mine if interested.

How should I deploy Angular + NodeJS project on a server?

I have an Angular project with NodeJS backend. I am confused about how to deploy my project on a remote server? I decided to use webpack because of it's simplicity, so I ran the following command:
ng build --prod
And it made a folder called dist for me. I think I must copy the content of this folder into the public folder of my NodeJS backedn server, but I am not really sure if I do the right thing?
Should I change other configuration of my frontend or backend codes too? Or just copying dist folder into the server's public folder should solve everything?
You have a very good documentation guide by Angular: https://angular.io/guide/deployment
And yes, you should copy dist/yourproyect (Angular compiled to HTML+CSS+JavaScript+Assets) to any web server you want to deploy it.
For isolation purposes (and maybe configuration), I'd recommend to put front and back in different folders. But you can deploy it within NodeJS.
In short: A web server Apache/Nginx/IIS/GitHubPages/Firebase/etc for Angular and PM2 ( https://pm2.keymetrics.io/ ) to launch your NodeJS. But depending on your expected load, you may want to choose one server type or another.
Anyway, if you specifically want to serve Angular through NodeJS, I'd recommend this tutorial (2016, maybe bit outdated, but it will help): https://scotch.io/tutorials/mean-app-with-angular-2-and-the-angular-cli

Push code to remote Docker

I have a GitLab repository in which I have a node.js app with express, I want "deploy" this code to my Ubuntu Server to use the express server remotely and not only local, but I don't want install node.js instead I want try use Docker.
I have read a lot about Docker, and I had understood the fundamental thing. My question is this, if I install Docker on my Ubuntu Server, how can I "deploy" my code on Docker when I push in my repository?
Basically, you have to divide the process in two steps. One is dockerizing your app, which means creating a Docker image for your repository. The second step is having your server use this image, possibly automating the process on push. So I would do something like this:
Dockerize your app. This means having a Dockerfile where you create an image that contains your app, runs it and possibly exports a port to use it externally.
Run the image in your server. Your server will need to have docker installed, and be able to get the right image (more on this later). If only one image is being used, you can just use a simple docker run command. If there are more parts involved, such as a database or a webserver, I would recommend using docker-compose.
Make the image available on your server. You have more than one option here. You can publish your image to a docker repository (private or public), or you can just download the repository in your server, and build the image there.
Lastly, you need to bind these steps. For that you need a hook that reacts on commits to the server, where you send a command to the server to fetch/build the image, and run the newer version.
You have a lot of flexibility on how to do this, actually. I would start with a simpler process, where you build the image on your server, and build on top of that according to your needs.
Dokku is a Docker based PaaS platform that provides git push deployments. It supports Heroku buildpacks to build an run your application or custom Dockerfile deployments.

docker compose django and node

I am trying to make an application in django via docker and I want separate the backend (django) container from frontend (node, react) container using only one repository.
I want to run node commands from django container (for example: npm init and creating the package.json at main folder).
Is it a good pratice?
If yes, how can I do this?
Thanks in advance.
If you only need Nodejs for building, you should have one docker image just for building (and if you want, deploying) the static files, and then use a whole different docker setup for the actual production environment.
You can look at https://github.com/dkarchmer/django-aws-template (disclaimer, I am the developer) to see an example. Unfortunately, the project is not yet fully tested and documented, but shows how I propose to handle static files outside Django (it does emulate what I do for real in production - just not fully tested).
You will see a top level docker image I use only for building the webpack type project (using gulp), and actually releasing that directly to S3. The top level index.html file gets copied to the django templates directory, to be used as the base template by other django templates (you may not need this if your front-end will be 100% independent of Django). But IMO, I find it useful to mix. For example, I do all the authentication portion using regular django (django-allauth).
Your question is fairly open ended (not exactly a good way to ask in SO), but I hope the link above gives you some ideas on how to implemented what you need.

Deploy meteor app with git / repository?

I've been searching around the web to see what's the best/simplest way to deploy a meteor app, and have found that Meteor Up has been the easiest way to do this.
However, I've been noticing that this works pretty awesome on small apps, now that one of our apps has grown larger than 250mb, Meteor Up has to build and deploy the whole 250mb app again and again for even the smallest change.
With other node applications we have on digital ocean, a simple git pull does the trick without having to re-upload the entire application.
Is there a way to maintain a meteor application with a github/bitbucket repository?
Thanks!
Well, I have found a solution for this.
Reference: PM2 + Meteor Environment Setup
Using meteor build and following the README that it generates, I was able to run the bundle without using meteor up.
This helps at deploying since it skips the process of uploading the entire bundle to the server, instead, just use git pull in the server to pull your code changes and use meteor build to create the build and run it with pm2.

Resources