How to serve or publish spa csr webs developed with react angular vue?
In #readyToHelp mode in stackoverflow I saw a guy who tried to render react code directly with nodejs.
Concepts
Server side rendering (SSR) — the traditional rendering method, basically all of your page’s resources are housed on the server. Then, when the page is requested (commonly from web browsers), the Html, JS and CSS are downloaded. Also frameworks can dynamically can create the html based on backend logic and finally download it. At this point, a lot of frameworks offer wonders for creating apps in no time with amazing functionalities.
Technologies : java, c#, python, nodejs, etc
Client side rendering (CSR)— Which is sometimes called “Frontend rendering” is a more recent kind of rendering method, this relies on JS executed on the client side (browser) via a JavaScript framework. So, when page is requested, a minimal , little or empty index.html, css and js were downloaded. Here javascript is responsible to send or receive data and update a minimal section of the page without an entire page refresh. Finally when user click or trigger some event, javascript will send or receive the data commonly to an api rest (json) using an async call called ajax
Technologies : react, angular, vue, aurelia, jquery, pure javascript, etc
How to serve a CSR or SPA web?
In developer stage (laptop/pc) you just need to use some kind of hot reload server(usually nodejs) which translates react into a pure javascript code and link it to your browser.
These kind of servers are provided or developed by framework creators (angular, vue , react, etc). Usually are pre-configured on your package.json as: npm run dev or npm run start
In testing/production stage, you should not use the hot reload server. You should perform a build which translates react into a pure javascript. Usually is the command npm run build and the result are new files on some folder in your workspace: index.html, bundle.js. main.css, etc
These files are ready to published on any http server from minimal to a complex servers:
- apache
- nginx
- haproxy
- tomcat
- widfly
- IIS
- free/paid web ftp services
- any decent server on any technology capable to serve html content.
SPA in Development stage
In react for example, if you are using create-react-app in a correct and standard way, there is a start script in your package.json ready to use:
```
“scripts”: {
“start”: “react-scripts start”,
“build”: “react-scripts build”,
“test”: “react-scripts test — env=jsdom”,
“eject”: “react-scripts eject”
}
```
I advice you to change it from **start** to **dev** to make it more intuitive. Because start is for real mode with real servers, not for the developer mode .
SPA in Test/Prod stage
If your react code is ready to be tested or used by real users in the real world, and your **create-react-app** workspace is correct and standard, these are the required and minimal steps:
- install a minimal nodejs http server
npm install http-server — save - add this in your script **main**:
”start”: “http-server ./build” - execute `npm run build`
- if there is no errors and your static files are created in the build folder(index.html, css, js, etc), - finally perform:
npm run start
For more information (custom port, etc) check this minimal nodejs http server implementation:
Docker Mode
If your package.json has correctly configured the standard scripts:
- npm run build
- npm run start (with http-server or another)
You could use Docker to deploy it on any linux server in this universe:
```
FROM node:14
COPY . /opt/
WORKDIR /opt/
RUN npm install
RUN npm run build
ENV PORT 8080
EXPOSE 8080
ENTRYPOINT [“npm”,”run”,”start”]
```
Linux is the only option for real environments. Windows & Mac are just for the developer laptop.
A server with dynamic variables
Basically, this server allows us to use one docker build instead of several builds (one per environment test, stagging, prod, etc) which is classic on the spas
Advanced Server
- user session
- login/logout feature
- user inactivity expiration
- jwt oauth2 token refresh
- any other feature that react or any CSR/SPA was not designed for
In this case you need an advanced server implemented on some technology like: nodejs, java, python, php, etc
These implementation:
- should expose you endpoints like: `/login, /logout` ready to be called from your react/angular/vue
- should handle the user session with any common way: memory, redis, mongo, etc
- offer a login : basic auth, google, microsoft, etc
My first attempt was:
https://github.com/jrichardsz-software-architect-tools/geofrontend-server
I planning a revamp with more features and unit tests.
Modern Monolithics
All of the features explained in the previous paragraph could be implemented on any backend technology able to handle http request and returns html content.
It is not recommended but if you have an api ready to use, you could add an extra endpoint in which you could store the build results of your spa and then serve them. With that, you won’t need any crazy http server.
Also this approach is used in some modern stacks in which the api/microservice is served close to the spa (react, vue, angular):
- MEVN : mongo + express+ vue + nodejs https://www.codermen.com/mevn-stack-tutorial-from-scratch-for-the-beginner/
- MERN: mongo + express+ react + nodejs https://www.mongodb.com/mern-stack
- MEAN: mongo + express+ angular + nodejs https://www.mongodb.com/mean-stack
That’s all
Hope it helps!
