I am working on developing a client-side application built on EmberJS.
Now, while I test the code in the browser ultimately, I have the following locally for development;
NodeJS & NPM
I have defined bower.json & package.json
I use ember-cli & do ember build & ember server to start the local server
I hit the URL http://localhost:4200 in the browser to access the app
Now my question is I wanted to understand, what exactly is happening here ?
Meaning what exactly happens before code runs in the browser.
I understand when the build happens, it actually pushes code into the 'dist' directory.
Is there any role in NodeJS in all of this (meaning any JS run on server-side in the background) OR we just utilize npm/bower for this case ?
So I just wanted to connect all the dots regarding running in the browser.
browsers don't support the features of modern javascript, so when you end up deploying your ember site, you only need to deploy static files (from the dist directory), and you actually don't need a server at all.
This is how https://emberclear.io works (no server, just a CDN).
The NodeJS things are purely for pre-deployment needs (development, transpiling, testing, etc).
Hope this helps.
Related
I created an Angular 7 app and built it using Angular universal to make it SEO friendly. However, as I was reading, it is not possible to deploy it now on a shared server (once build with Angular universal, otherwise it is possible), since it requires Node.JS to run the script file on server.
My problem is that my hosting plan is on a shared server so I will not be able to run it using Node.JS but I still care of having my app SEO friendly.
What can be a good solution?
Angular Universal renders your application in server side before serving the page (SSR). Indeed you will need nodejs to make it work.
You need to prerender your application as static files.
With #ng-toolkit/universal installed you should be able to prerender your application with the command :
npm run build:prerender
Now, you should see new folder dist/static , inside which all your application views should be prerendered and can be served as static files.
As nodejs uses npm and angularjs cli also uses npm for modules.
Is there any relation exists between these two?
Installed node.js and tried with hello.js simply single line console.log.
Installed ng module and generated a simple angular app and started server using ng serve -o, kindly help me to clear doubt, if any relation exists between two.
nodeJs is for developing backend, Angular is for developing frontend
You can have a static web site written with Angular and hosting it somewhere like godaddy and that is it
If you need to show some data, interaction with database, submitting data,... then you need a backend, one of the platforms for backend is nodejs, also you can use asp.net webapi, or java or ...
Node and Angular are two distinct entity. In the "web world" there is two distinct things :
Code running on the client side (running in your navigator), frontend, generally using Javascript/HTML/CSS . This code here is used to design your webpage and interact with the user. There is where angular/angularjs work
Code running on server side, backend, this is where people use NodeJS. Here you find more logical code used to manage and to store the data thank to database. Here you can use node express or nestjs to create an http server using node.
Link between both ? Both can communicate using http protocole (we use the angular http client to do that). We simple ask the node server the add/update/remove/calculate data and we play with it :)
Angular.js is a client-side framework that runs in web browsers.
Node.js provides an environment for running JavaScript from a command line.
Angular.js is supported by a bunch of development tools (such as test HTTP servers, and transpilers to convert from TypeScript to ES5). Many of these tools run via Node.js.
You can also use Node.js for server-side programming to support the client-side code in a live environment.
Is there any way to setup local development environment with React at front-end and a full-stack server (e.g. WAMP)?
The perfect case is to:
Use the default React Create App setup without ejecting scripts
Make AJAX calls to PHP files which will handle the queries to MySQL database
Questions:
Is it possible to just run WAMP at localhost:3000 and React yarn start at localhost:3002 (it auto-sets different IP) and then just put PHP files somewhere inside src folder and call them from JSX using one of the AJAX technologies (e.g. jQuery or native XMLHttpRequest)?
Or the only way is to eject the scripts and then build and put files inside WAMP's /www/project folder and then use custom tools to update all this stuff at WAMP's localhost address?
EDIT: putting react app into /wamp/www is not an option - it didn' work for me and I don't want to put more efforts into it. Running React and WAMP in on localhost seems to work, the question to answer is:
How to import the PHP file into JSX. Trying to call it with smth like: require('./foo.php') does not work. import foo from ./foo.php didn't work either. Anly ideas?
After investigation I have found a way to achieve my goal.
The key to be able to send request to any local server you use (Apache, Nginx, Node.js) it to use ReactJS proxy feature:
https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development
After adding "proxy": "http://localhost" to my package.json file I was able to send and receive requests to my WAMP server while keeping all React's Create App native scripts.
P.S. It turned out Facebook has a nice React-native tool for request called fetch - https://facebook.github.io/react-native/docs/network.html.
1) I strongly recommend you do try to do this :
Separation of concerns is very important. having two repositories for your application, one for the backend and one for the front end is very important. Especially if you are using a versioning system, and more importantly, if you plan on working on it in a team. I suggest you just have your wamp installation stay where it is, add a Vhost like : backend.my-project.com, and then run your react app normally, and use the env.local in cra file to store the URL of your backend app using the environment variables.
2) You do not need to eject scripts to have both your frontend and backend in the same place :
Either create-react-app inside your wamp folder, or point your wamp folder to your create-reac-app generated react app
Is it possible to run an Angular 2 application in browser without using NodeJS as a server. I am not sure, but if i understand correctly the newest browsers are able to compile/"understand" the TypeScript code so i don't have to use any third part js lib to compile it into plain javascript?
I would like to create an application using 100% Angular 2 on frontend and for the
backend REST API using Ruby On Rails, without using Rails's page rendering, sessions etc..
I am little confused about it how does Angular2 work/run behind the scenes... How i should configure my Angular2 application to use it without NodeJS?
I think you're mixing up some technologies here.
Server
You can run an Angular app on any server that can host static files. There is nothing special about node. So yes, you can use a ruby. Or an Apache, nginx, lighttpd etc.
The reason for this is that JavaScript is run on the client side. The server's response is only to deliver the JS/HTML/CSS files to the client that is visiting your site.
TypeScript
If you're writing an application with TypeScript you need to transpile it to JavaScript before any browser understands it. You can do this (1) before you're deploying your app to the server or (2) use a library like System.js that will transpile TypeScript on the fly.
While (2) is definitely an option and the Angular CLI used it until recently, (1) is in my opinion the better option. Angular CLI switched to (1) and is now using webpack. Webpack is transpiling and bundling your app before it is hosted on a server.
Hope I could clear things up a bit for you.
TL;DR
If you use TypeScript with Angular 2, you only need Node during development:
DEV: NodeJS is used to transpile .ts files to .js files.
PROD: Generated .js files are used inside the browser, NodeJS is not required anymore, except if you also happen use it in the backend.
NOTE: If you only use plain JS in development you do not even need Node
You can use any server side technology including Asp.Net Core, Node.Js, PHP to server the js, html and css content.
While building the application in the IDE, the Node.js transpile the .ts files into .js file.
I'm able to run any ReactApp only on Nodejs server, but not on a Tomcat server.
Some Qs:
React is purely client side rendered library, and why it requires Nodejs (which is server based)? Why React official Tut recommends Nodejs?
Is it true that Tomcat is for running pure Java applications, and Nodejs for pure JavaScript applications?
I tried to run a sample ReactApplication with few containers in Apache Tomcat, by including the Reactjs include files. But, I get a blank screen. Inspect element shows the non rendered JS source.
Update 1:
If yes for Q1, then Here's a simple React ready application (with all dependencies included) which is easy to run in Nodejs using NPM. How can I run the same app in Tomcat? Can I able to create Web ARchive using this?
1.React is purely client side rendered library, and why it requires Nodejs (which is server based)? Why React official Tut recommends Nodejs?
React is a client-side library but it requires NodeJs for below reasons :
- React uses JSX syntax which browsers doesn't understand and hence it needs to convert into a javascript code that browsers can understand, Babel will do that. Babel needs NodeJs and with the configuration you can convert JSX, ES6 code into ES 5 which browsers can understand
- You may also need node js server if you are using React on server side but this is optional
The sample that you have given needs to transpile into ES 5 code using web-pack which uses Babel. WebPack and Babel both need node js. Hence you need NodeJs.
I don't know what you hide under ReactApp.
But if you use React in client Side you don't need Nodejs server to run it. You can you Nodejs to build it, there is tools to simplify the work. So your ReactApp will be only an HTML page with some js dependencies. Apache or Tomcat can serve it, but for Tomcat you have to bundle it as WAR I think.
But you need rest endpoint to do some stuff, and you can do that with lot of technologies include java and tomcat.
YES