Node Js React Map Join

Posted on  by admin

Not the answer you're looking for? Browse other questions tagged reactjs or ask your own question.

I found a lot of tutorials explaining how to host React apps online. Some just explain how to copy everything in the build folder to a CDN and stop there, others use complete solutions such as Next.js to be able to do a lot more.

I needed more than just a CDN, some logic was required for the routing.

Understand how to create Rest API’s in Node.js and access it in React and store the result in Redux

However I felt that Next.js was a bit overkill for my use case. I picked Node.js with Express.js. The way I’ve set up this example makes sure this logic can be written in TypeScript (the same language I use for my React App) and can be put in the same Git repository.

Quick Start

TLDR: You can find the final source on GitHub. Install Node.js and NPM and make sure you can run node -v and npm -v. I used these versions:.

Create a folder: mkdir frontend-service. Browse to a folder: cd frontend-service. Initialize a git repository with: git init.

Generate a folder “react-app”:. Browse to this folder: cd react-app. Launch the react dev server: npm start. Go to http://localhost:3000/ and check if you see the default React.js sample. When you have created your desired UI, you can build a release with:. This generates a build folder with an index.html file and a bunch of .js and .css files which you could potentially just host on any CDN. But there are a couple of reasons why I host React.js apps on a Node.js runtime instead of a CDN. React Apps are often Single Page Web apps.

Rather than having different URL paths pointing to different HTML pages, you want that all of your URL paths resolve to the index.html page.

The index.html page will initialize and use the react-router package to display the correct component based on the URL.

For Search Engine Optimization (SEO), it is better to render the page title and meta tags on the server.

I did find a dynamic way to render this on the client side and even blogged about it.

But in my experience the Googlebot sometimes does render the JavaScript correctly, and sometimes it doesn’t. Now the React App has been generated, we can update our index.js file to serve the static files in the build folder:.

Rerun npm start and browse to https://localhost:8080/ and see if your React App is being served.

Left Join

To use client side routing, you have to install the following packages:. If you haven’t already, this is a good time to open the frontent-service in an IDE like WebStorm or Visual Studio Code.

You can try it out by running npm start in the node-runtime folder. Navigating through the links goes well until you refresh the page, then it will resolve Hello World! Our Node.js service needs to point all of the following URLs to the index.html:. To make this happen, replace the index.js file in your frontend-service folder with the following code:.

This code in bold makes everything work.

Run npm start to verify that it works. After clicking on “About”, refresh the page. The caching strategy here is to allow caching for requests on all static files, except for those URLs that result in index.html. This is to prevent that users will load an old index.html that points to old main..chunk.js files that no longer exist.

Right Join

That scenario would result in crashing your React.js app before it is even initialized. You can see in the FireFox developer tools that only the .css, .js and pictures are being cached:.

The “path2” name is a bit silly, but because we already import “path” in the new index.ts that we are going to create next. Rename the index.js to index.ts and modify it to the following:. In the package.json, make sure npm start points to the compiled dist/index.js:.

Now you can build with npm run build and run npm start again for the app to work!

You can add the HotModuleReplacementPlugin to update your Node.js runtime on the fly without having to restart your server. For this you have to create a second webpack configuration ‘webpackdev.config.ts:. Add the following code to your index.ts:.

And finally open up two terminals:. One with npm run webpack. One with npm start.