MEAN Stack App - Splitting UI and backend code between 2 servers - angularjs

For a MEAN stack based application, I'm wanting to run the UI code on one server and the backend code on another server. Anyone aware of any Github projects that show MEAN project setup in this fashion? For the server w/the UI code, it shouldn't have any Controllers, Services, DAOs, MongoDB configuration "db.js" or running MongoDB instance. The backend code on the 2nd server would have all of the Controllers, Services, DAOs, Rest API, MongoDB config "db.js" and running MongoDB instance should be present.
I'm hoping to get some examples. There are tons of MEAN examples out on the net and in Github, but I haven't found an example where the split the MEAN stack between different servers like I'm wanting.

Below is the easiest and better way to do what you want actually:
You need two separate directories in your system:
Frontend - use for client(UI)
Backend - use for Server(which is for DB and routers and controllers)
Follow below steps to setup the frontend project only:
a. Install angular cli
npm install -g angular-cli
b. Make Project
ng new my_frontend_app
c. Go to project Directory and install NPM modules
cd my_frontend_app
npm install
d. Run the Project
ng serve
Below are the steps to Make Backend (express and jade engine) Project:
a. Install Express Generator
npm install -g express-generator
b. Create Project
express my_backend_app
d. Go to project Directory
cd my_backend_app
e. Run the Project
npm start
Now you can set the environment varibales in client(my_frontend_app) pointing to the server(my_backend_app) and deploy separately.

Related

How to build react.js apps at visual studio code?

I have created two apps using 'Visual Studio Code' and 'node.js.' I run them using command 'npm start,' and they show in the browser. I want to build them or deploy them so they can be used by anyone. It says there to use command 'npm run build.' How to do that, and what technique you use in order to build them?
It depends on what configuration you used for building the React app. If you used create-react-app, npm run build is the correct command for building it.
If you used a different configuration (e.g. webpack), you should use the relevant command for that configuration.
Either way, deploying it will be as easy as copy/pasting the build folder's content to the server you want to host it, after running the build command.
Visual Studio Code or any other Code Editor for that matter is not relevant. You can develop, build and deploy any React app using any Code Editor you want, it's just a matter of preference.
"Building" refers to the task of preparing (transforming, minifying, compressing, etc.) all the relevant project files so that they're ready for production (assuming that your build scripts are configured to do so).
"Deploying" an app is usually a separate task that will deploy (upload) your current project build to a development platform provider like Firebase, Netlify, Azure, etc. Note that you have to register with a provider and setup a new project on their end before your deploy your project.
Which provider you use is totally up to you. Also, you have to configure your current project once you've chosen your development provider. They'll provide instructions on how to deploy your project.
On a side note, keep in mind that you can configure your own npm scripts so that they run whatever you want. More about that here

Deploying ReactJs app in my machine through localhost

I create a reactJs App. But for now I run this app through Intellij idea and I would like to deploy it and run permanently in my machine without turning on through Intellij idea. How I could deploy react app and run it as deployment in my machine
If you created your app with create-react-app, you should be able to start local development server from the command line. To do this, open you project's root directory in the terminal and type npm start.
If you would like to create and serve a production bundle, you should build your project with npm run build and then serve build directory with a web server. The easiest way to do this is install serve via npm (npm install -g serve) and run serve -s build
For this purpose only webservers available like Tomcat, Payara, Whildfly, etc. You can install any one of those servers and deploy your application into that. As on when you started the server your application will be accessible.
Approach 1:
You can set up the server into your IDE and simply run the project on server mode.
Approach 2:
By using your project code, create a war file with the help of any build tool like MAVEN/GRADLE, etc. Then login into the server manager(Tomcat Manager) and deploy the generated .war file in deployment section.
Note: With the 2nd approach, you can access the application as on when you start the server.

How to Host Laravel-Mix applciation in BigRock?

I am building one application with Laravel as back-end and React.js as front-end. How to host the application in BigRock or GoDaddy? I searched for 2 days, and found nothing related. Please HELP!!
Laravel application hosting don't need something special... just take care of these things.
php version as per the desired laravel version.
composer should be installed on server.
Some pre-dependancies check here... https://laravel.com/docs/5.8/installation
Your domain should point to <application_root>/public folder.
If you are using mix make sure node should be installed.
After that..
Just clone / upload the code on server and run the desired commands like..
composer install & npm install to install the laravel dependancies & node dependancies.
As per your case you are going to host two application here. So you can follow the following approach.
Host laravel application as sub-domain like api.domain.com and react application on main domain.
I hope you are already fimilar with what's required for hosting react application.
Edited:
For the shared hosting, you can request to enabled the shell access from hosting provider support team. Once they enabled, you'll able to run the linux command and do install by yourself.
Sometimes they could install required software for you.
All the best!

Docker and Angular app: one or two containers?

I have difficulties to understand the whole proces of an Angular-app in Docker.
So anguler needs a webserver to run (like nginx) but also needs nodejs to access the backend?
Do you have divide this in 2 containers or how do you have to perform this?
I have now 1 container which had as base image nodejs. There I performed the npm install, bower install and gulp build etc. Now I'm able to visit the localhost:8888/api to see that part of nodejs but I'm unable to visit my angular app. Probably because it's not hosted by a webserver?
NGINX is a front-end server, which doesn't do back-end stuff. This means, that you can separate your application across 2 environments (containers):
Node.js server with it's backend,
NGINX with Angular sites.
NGINX will route requests to node server and that's the whole communication.
From there, you can pull these separate container on your productions servers. You can also configure it in the same container and they should work fine together.
If you installed everything, then it should be a matter of proper configuration.
You can check out this post as a reference on how to set everything up:
Node.js + Nginx - What now?

Why do I need to install node.js and git to learn AngularJS?

I am presently reading Manning's AngularJS in Action by Lukas Ruebbelke
The introductory part suggests,
Because you’re pulling files from a CDN, you’ll need to run
Angello Lite(the application name) from a web server. There are a few ways to do this, but one of the easiest ways is to use the npm package serve.
The steps for installing Angello Lite are as follows:
■ Install Node.js. You can find all of the information to do that at http://
nodejs.org/.
■ Install the serve package by running npm install -g serve from the command
line.
■ Download Angello Lite from GitHub, using the URL given above, and place it
on your local machine in a directory named angello-lite.
■ Navigate to the angello-lite directory from the command line and run serve.
■ Go to http://localhost:3000 in your browser to see the application.
Does learning Angular JS require previous exposure to node and git?
If I have Apache Tomcat already configured on my local m/c, what is the procedure to start with it?
Furthermore, just to keep in sync with the author, I installed git and then cloned a dir onto my local m/c from github.
Then i install node.js and Install the serve package by runningnpm install -g servefrom the command line.
Unfortunately when i navigate to the angello-lite directory from the command line and run serve, it shows me
where angello-lite is the repository where the application resides?
Any suggestions on how to configure successfully?
I have no idea regarding node.js and git. Do i really need to learn
these to begin with AngularJS then.
No, that's not a requirement. You don't even need a web server. You can have your static HTML files locally or use some online service like plnkr. Obviously if you need to work with dynamic data then you will need a web server. At some point you might want to start making AJAX calls in order to fetch some dynamic data from your server backend.
If I have Apache Tomcat already configured on my local m/c, what is
the procedure to start with it?
Just add an HTML page to the root of your website, open your favorite browser and invoke this page.
You don't need those tools to learn Angular - you can download latest package from the AngularJS website (both for development and for production).
Node.js and Git may be necessary to pull and build packages from the NPM, run tasks and many more great features, but just to learn Angular all you need is its code.

Resources