Salient Soft

Initial points found upon trying out React…

1. Deploying and running a Basic React App

The React framework site and nearly all the other tutorial sites I found do not make it clear at all how to deploy/run one of the react examples to a static web server, much like Angular does by default, with the front end framework bootstrapped from index.html. In most cases, they suggest using Node.js on the server to run the app, which then creates everything dynamically and just lets you access the site e.g. via localhost:3000 if running locally.

Whilst this may be efficient if you have node.js on your server, it does not help when deploying to a static web server as I would be e.g. with Zen internet, or when extending an existing web app with some react on one of the pages.

After quite a bit of head scratching, I found this simple post which showed how to simply add the “homepage”: “.” directive to package.json, which defines the homepage for the app. This is picked up by the webpack build, and an index.html is created (or extended) with the necessary javascript to start react. I tested this out by amending this simple react calculator tutorial app.  It built correctly by adding the necessary webpack bootstrap code to the public index.html template in the app, and it ran fine both locally with http-server and on zen internet. It also ran correctly locally via npm start, which runs it dynamically under node where this is available on the server.

In my case I had deprecated OpenSSL build issues as detailed on this post here. I worked around these purely just to get the example to build and run as it was my very first stab at running react, by using set NODE_OPTIONS=--openssl-legacy-provider as per the post. Note that this is a dangerous legacy setting which should not normally be used as it opens up legacy SSL vulnerabilities. For my simple initial test this was not a concern however.

1. Creating and building a React App from scratch

I used create-react-app for this which looked like a really simple tool to create a standard build simply, somewhat like the angular CLI. This post here shows how to do this with typescript enabled by default, by simply using the following npx command:

npx create-react-app my-app --template typescript

This created a simple app which again I could modify to be served from a static server as above via the homepage directive. However, On researching this further, I noted that create-react-app is now deprecated.

I am continuing to use this for basic react learning, but going further forward, I will likely be adopting Next.js as the framework to use with react and to build apps with. The react site says that one of the recommended additional frameworks should now be used and Next.js seemed best for me initially, as it works with static sites and as a wikipedia presence. Remix among others is popular but did not have a wikipedia page, and I liked the static site emphasis of Next.js. However as I wanted to learn one step at a time and not hit 2 frameworks in one go, I intend to continue with create-react-app for the basics at first.

Comments Off on React Framework