Search code examples
reactjswebhttpsfrontendwas

React needs web server? How do the web application server and react communicate?

I'm a student who study web development by myself. I'm developing a shopping mall site as my personal project and I've got some elemental questions when I tried to make a login page.

First of all, I will tell you about the main concepts of my project on the beginning for you to understand my questions more easily.

My initial concepts and ideas are in below :

  • Database(MySQL)
    I needed some data to show on the web site. So I decided to use 'Fashion Product Images Dataset' on the Kaggle. Users who sign up will be stored as well. I just assumed that there is everything that I need, in order to make the website.

  • Web Application Server(API server)
    I thought this is a kind of bridge which are able to make the javaScript on the browser to get some resources, a sort of product images and prices, when the page is loaded for the first time or the resources need to be changed by users or codes.

  • Web Server(Built-in the React)
    I made the React application using 'create-react-app', so I don't need to think about the web server actually. The only thing that I have done is building some components which display the UI using react library.

FRONT-END                                      BACK-END
 ----------          ----------------------------------------------------------------
|  CLIENT  | < --- > |   REACT   | < --- > |  API-SERVER  | < --- > |  DATABASE  |
|   REACT  |         |(WEB-SERVER)|

When users request my page, React(The built-in server) reply it. Then, the users will get the SPA(client-side).

The SPA doesn't have any data, it will fetch the data from the API server(Because fetching codes are inserted in the .js files). Then, The query inside of the api server will get the data from the database. And then, the API server gives the data to the SPA.

It was quite going well until I start to think about the security. As you can see, when we visit other web sites, they use the https not the http. So I wanted to use the https, because it is really important to protect personal data from bad people. When I consider my idea, but, there wasn't any place to put the code which changes http to https.

Plus, I understood React is just a library, like reactjs.org said. So I think the reason why I am able to use the built-in web server is because the application is made by 'create-react-app'.

Finally, here are main questions. As I know, the https logic should be in the web server. I mean the server which deal with the client's request.

  1. If what the react is a library is true, do I have to build a web server? (I think building a web server by Node.js or other languages is the right way, because a library is just a library..!)

  2. If I don't need to build a web server, where should I put the logic?

  3. Let's imagine that I am totally ready to use https (I made a web server by Node.js and I got a CA to use TLS), and then, the client and the web server are able to communicate safely. But, all of the code which call the API are written in the .js files. And the files are now the client's browser. It means client and the API server doesn't have safe connection, because the API server and web server have different domain or port.

Maybe summary of the question 3:
3.1. When I searched on google, I understood web application server is to deal with requests that web server can not service. In the SPA, but, the request is from the client. Is this right?

3.1.1. If the question from the client, how to prove it is safe communication between client and web application server? because web server and web application server have different domain or port!

Solution

  • there wasn't any place to put the code which changes http to https.

    Somewhere you have code which makes an HTTP request to a URL to fetch data from the API. That code must state what the URL is. You can specify the URL scheme there.

    So I think the reason why I am able to use the built-in web server is because the application is made by 'create-react-app'.

    React is a JS library. It doesn't have a built-in web server. create-react-app installs React, generates some default project files, and includes lots of tooling.

    The web server is intended for development use only. It includes features that are useful for development but inefficient for production such as Hot Reloading.

    It also has a build script that outputs static files for deploying on your production web server.

    Your production server can support HTTPS. It may or may not be the same server that hosts your API.