Initialise the client

[JLGH42]

The code for the client UI needs to be rendered from the server in order to perform SSR (Server-side rendering):

Webpack: for converting JSX/JS code into language that the browser can understand Babel: Transforming and compiling code into one format, also reading extension files

~This also introduces the concept of hydration in React Apps: https://levelup.gitconnected.com/how-to-render-react-app-using-express-server-in-node-js-a428ec4dfe2b~

1. Initialise the project: setup Webpack and Babel to read and write to the index file
2. Use Babel to compile code into the build file which is rendered on the server
3. Build out a simple component to view inside of the browser and ensure SSR is being used

Because ExpressJS already has the capability to serve static files, I can take advantage of this by restructuring the project setup and using Express to serve the "build" folder once in production.

The objectives are:

• To detect whether or not SSR is implemented, check the file sent in the network tab and see if JSX is rendered inside of the root element, if this is the case, SSR has been implemented
• Serve both the ExpressJS app and the ReactJS app concurrently on the same port.

Pros:

• SSR results in faster page loads, better UX and gives more control over what data is being sent to the browser
• Serving static files from the port cuts costs of various services (in place of this I'd use something like Netlify to host my React-App and another service for the Express server)
• Code Splitting

Cons:

• Longer development

[JLGH42]

• [x] Refactor code to have Express serve static "build" folder
• [x] Render a component to the screen using Express' server

[JLGH42]

To render to the App component:

1. run npm run build
2. place the generated 'build' folder into the server's "public" folder