Design of an isomorphic App
In a typical single-page application (SPA) server sends JSON data. Browser receives that JSON data and builds HTML.
In an isomorphic app, the server sends a fully-formed HTML to the browser. This is typically done for SEO, performance and code maintainability.
In an isomorphic app the browser does not directly deal with the API server. This is because the API server will render JSON data and browser needs to have fully formed HTML. To solve this problem a “proxy server” is introduced in between the browser and the API server.
In this case the proxy server is powered by Node.js.
Uploading a file in an isomorphic app
Recently, while working on an isomorphic app, we needed to upload a file to the API server. We couldn’t directly upload from the browser because we ran into CORS issue.
One way to solve CORS issue is to add CORS support to the API sever. Since we did not have access to the API server this was not an option. It means now the file must go through the proxy server.
The problem can be seen as two separate issues.
- Uploading the file from the browser to the proxy server.
- Uploading the file from the proxy server to the API server.
Before we start writing any code, we need to accept file on proxy server and it can be done by using Multer.
is a node.js middleware
We need to initialize multer with a path where it will store the uploaded files.
We can do that by adding the following code before initializing the node.js server app.
any file uploaded to proxy server
would be stored
Next we need a function which uploads a file from browser to the node.js server.
Next, let’s upload the same file from the node.js server to the API server.
To do that, we need to add a callback function to our node.js server where we are accepting the POST request for step 1.