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?
Related
I have developped the application with DJango + ReactJS
when in developpment,
using
$python manage.py runserver
and
$yarn start
which launche the two servers on localhost:8000 and localhost:3000
However in production environment, I need to launch two servers??
When I use webpack before I run two server in developpment environment, but in Production just building in advance and use only on one server uwsgi
Could run under one server directly, I'll share other ways too.
Have your yarn build done and serve under Django's static files + listen for js/css/image assets. Now about your routing, you need to capture frontend routes such a way that (when direct url is entered), Django responds back static assets itself.
The downside in above is that your APIs' urls have to be following some pattern which won't interfere frontend URIs (routes).
Running two servers + CORS
Pack your react build with expressjs and serve it with some production grade server like pm2/ could use nginx + static files too but to tackle routes issue (of React), you'll need to tweak nginx to listen to not only "/" but also other routes in frontend.
Now, calling django APIs, do enable CORS config to support calling APIs from your React site.
Can also use serverless to send your static files + CORS behind the scenes.
If you're not having access to root of server, would need extra one to spare in former case. Otherwise to spin up a frontend + backend process in same server machine won't do much weight.
Good luck!
I have an application that uses React for frontend and Perl for the backend.
The previous developer created an NGINX config file that handles the communication between the built version of the React code and the backend with no issues.
However, since NGINX is configured to work with the built version, I have to do npm run build every time I want to see the changes I made on the frontend side and interact with the backend.
I was wondering if it is possible to configure the NGINX file so that I can just use npm start to see my changes. Can this issue be resolved by making modifications to the NGINX config file or is the NGINX config file irrelevant for the development build and I just need to modify the backend code to get it working with npm start?
I am unfamiliar with both Perl and NGINX services. So, I am not sure which part I need to focus on. Furthermore, I had some trouble communicating with the backend on development build (npm start) with no NGINX config file.
I recently create Express and MongoDB API and after that, I connect that API to my React Application successfully and which is running well. But one situation occurring during deployment now I need to deploy both projects separately means I need two hosting plan for them. So, I want that both project running on the same host. Is it possible? and How?
A build of any React application creates (unless webpack-dev-server is used to compile it) the output which consists of static files: script bundles and .html file(s) that reference the bundles in <script> tag.
Those files can and should be copied to Express in production build. Then you have one server on one host. When React application runs inside a client (e.g. browser) it gets everything including .html files, script bundles, API responses from the single source: Express backend/server. Which by the way excludes any possibility of getting CORS issues so many people are asking about here on SO.
Example, e.g. a boilerplate project that demonstrates all that.
If you execute commands:
git clone https://github.com/winwiz1/crisp-react.git
cd crisp-react
yarn install && yarn start:prod
and then point your browser to localhost:3000, you will have React app running inside your browser and it got everything from one single Express backend.
crisp-react has two subdirectories: client with React client app and server with Express backend. The build command copies the build artifacts from one subdirectory to another. So you can even rename or delete the client subdirectory after a build, it won't affect the Express backend.
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!
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.