Create React App: serve html in development - javascript

Integrating a server (say in Python or Java) with CRA can be done in two ways: "CRA first" or "Other server first"
By CRA-first I mean that the main serving component is the React server, hence serve the React application with yarn start and call a server api configured in package.json's proxy setting. This is easy and clearly explained in Create React App documentation.
By "Other server first" I mean that you serve everything (HTML etc) with a web framework of your choice but that the served HTML also loads the React application. The documentation explains how to deploy in such situation (basically yarn build the app and normally load the generated JavaScript file(s) from your HTML) but not how to do this in development.
So, how can I serve with an arbitrary server my possibly dynamic HTML and in such HTML reference the deployment JavaScript that CRA keeps updated?

It is explained in the documentation in the section Static Server https://facebook.github.io/create-react-app/docs/deployment#static-server
You just build yarn build and serve it using serve -s build 4000. Or you can use Apache/Nginx or whatever you want instead of serve. But you need to rebuild your application every time you make changes and restart the server. This way you won't get hot reload etc. You need Webpack server (CRA integrates it in the background) for that.

Related

Deploy angular rendered app on shared server

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.

NodeJS and client-side Javascript in Ember application

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.

How do my Vuejs frontend and my node express backend interact with each other and do i need the vue-cli?

I am trying to build a simple website with nodejs, express and vuejs.
In tutorials i saw people recommending having the frontend and the backend communicate through an API by using the vue-cli. (example). 1. Do People use this method in production as well?
I also saw that you can build the vue cli files into a /dist folder and move this folder into the backend. Then you can use the backend to serve the generated index.html (example)
2. After doing this, is vue.js still communicating with the backend through the api i wrote with the vue cli for development?
3. Do i have to change code in the backend to deploy the website this way, other than statically serve the index.html file that was build by the vue-cli? and lastly 3.Can i just npm install vue and use the provided vue.min.js in a scripttag and just lose some usablillity while developing?
I hope my question is understandable and i appreciate every answer.
The backend typically serves the frontend via REST API.
Your Vue app is completely separate from your backend. Most applications keep business logic in the backend and use the frontend as a view. For smaller projects, you can keep the logic in the browser.
To answer your question directly: No, the Vue CLI is not used for that. It's purpose is to enhance your development process.
Relevant topics you should learn about: Representational state transfer (REST), Single page applications, Ajax
Advanced / less relevant topics: GraphQL, Server side rendering, HTTP, web sockets, MVC

Develop React w/ full-stack (WAMP) locally

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

How can I serve an Angular 5 app without using ng serve?

I can build and serve an Angular 5 project with ng serve and view it in my browser. I'd like to move the files onto a docker container because my final app needs to have a php backend.
When I move the same file system that runs with ng serve to a docker build and try to navigate to it, I receive a server error.
I know the container works properly because I can serve PHP files to the browser at the respective localhost port without any issues. So it needs to be something with Angular that is causing the error.
I've noticed that the ng new angular-tour-of-heroes project doesn't have an index.html in the root project directory. When I move the one in the src/ folder to the root, I still get nothing in the browser.
How can I serve an Angular app using Docker instead of ng serve?
This answer will be two parts since it sounds like you may not be familiar with the build process.
Building
This is more general to most JavaScript frameworks. There is usually a "build" process that will produce the static web application in some way that it can be served by a web server.
In the case of Angular, it is ng build. You can learn more about the command at https://github.com/angular/angular-cli/wiki/build. The ng build command would create a dist directory in your project where the built HTML, CSS< and JavaScript lives. The files in this directory are what you would push to your web server to serve.
Docker
Now that we understand how to get the source of the web application to serve, we want to run it as a container. Based on your question, I am assuming that you already have a Docker image with a web server. In this case, you could copy the dist folder to the same location as the existing Dockerfile that builds your web server and add a line to your Dockerfile such as:
COPY dist/* /my/webserver/root
If you can provide more information about your existing image, Dockerfile, and environment I could provide a better example of building and producing the Angular application to the final web server image.
Though, you don't necessarily need to serve the Angular application from your PHP application. If your Angular application is connecting to the PHP application they could still be separate Docker images and containers that are linked together.

Categories