React Router and NodeJS

Hosting your React app is usually as simple as copying over the files to a "public" or "static" directory.

 

You could simply paste the files onto an IIS or Apache Server and this article could still help you if you are using sub directories. However, I have written this to tackle the situation where a pre-existing web application will host, in this scenario the host application is written in NodeJS. 

Generally, all you need to worry about is serving the "index.html" file that comes in the production build bundle at the right time, something like: 

router.get('/myroute', async (req, res) => {
  return res.sendFile(path.join(__dirname + '/public/client/index.html'));
}

// later on make the public directory accessible
app.use('/public', express.static(__dirname + '/public'));

However, in this case I want to use React Router to navigate to sub pages. e.g. myroute/ home, myroute/user etc...

The way to do it is to use a wildcard off of your main route so that your React app will load on every child route of "myroute":

// this is required to support any client side routing written in react.
router.get('/myroute/*', (req, res) => { 
    res.sendFile(path.join(__dirname + '/public/client/index.html'));
});

On the React application side the "basename" property of the Router wrapper component (in React Router 5+) needs to be set. In my case I set "base" when in production mode to "/myroute". This will mean React router will look for "/myroute/new" to render the Start component rather than just "/new".

const base = process.env.NODE_ENV === "production" ? "/myroute" : "/";

<Router basename={base}>
   <Switch>
     <Route exact path='/new'>
       <Start />
     </Route>
   </Switch>
</Router>

It is also worth mentioning that it is considered best practice to add a href meta tag to you index.html page.

References

react-router | https://reactrouter.com/web

medium | https://dev-listener.medium.com/react-routes-nodejs-routes-2875f148065b

Azure Functions with TypeScript

Things to know about using TypeScript with Azure functions:

1. Make sure that you have node installed using the latest LTS version (Long Term Support). If you need the latest version for other projects try using nvm-windows to manage multiple versions of Node. Install the latest version of nvm using the zip file in assets of the latest release. nvm list and then nvm use. Also nvm install v 64/32bit is pretty nifty.
2. To run Azure functions manually (particularly useful for timers etc.. anything that is not an Http Trigger). http://localhost:<port>/admin/functions/<FunctionName>. Also for CRON timings see this cheatsheet.
3. Azure Functions in TypeScript still use CommonJS modules, so while you can use imports and exports in your code the transpiled JS will be using Node style modules. Bear this in mind if you are expecting to be able to use any of your own libraries that compile to anything other than CommonJS. Check your TSConfig.

So is TypeScript support any good? So far it seems good, the only problems are with my own libraries. I have also noticed that you cannot use fat-arrows for Azure Index functions (for those not so familiar - the entry point called by Azure infrastructure).

Windows Azure and Node - Remember to specify the version

I kept finding that my back end code would subtly fail on something once deployed to an Azure site despite working fine in my own environment. Having hit the problem again recently, I again looked through the server logs to try to identify the problem assuming that again Node would be throwing an error over some very simple syntax.

Then I noticed the following:

"The package.json file does not specify node.js engine version constraints"
"The node.js application will run with the default node.js version 0.10.32"

This is old, in fact to put this into perspective the contemporary node change logs start from 0.12.0 which is the beginning of 2015. I had to go through their archive to find out where this version is from, which is October 2014!

Now I know, the solution is to specify the node engine that Windows Azure should use. e.g.

As soon as I had made this change my problems went away as you may expect. Looking at the latest "how to" guide on the Azure website for node development I notice that this features at step 5. However, for those who have legacy node websites on Azure, this is not so intuitive.

Pondering a RESTful API in Node

Hello!

I am planning to utilise a NodeJS API for my website (gfentimen.com). Before I do this I thought I would try two different API frameworks to see which I prefer.

Loopback vs Express 4
After doing some research into the easiest way to create a RESTful API in node there seem to be a number of challengers. Loopback by StrongLoop seemed to have all the answers, it will connect through to Mongo without an issue, it creates an API framework in next to no time at all, but is it too abstracted?

I downloaded and installed it too see what would happen. Yes - it looks like I am going to have to buy into all of StrongLoops technologies but.... Fair play to them - it was very easy - before I knew I had a screens like these:

So what about Express 4?

Interestingly, since I started writing this blog post Express has had its IP bought by StrongLoop. I hope this will mean more corporate money earmarked for the project. I can't help feeling cynical and suspect that Express will be incorporated into their overcomplicated but admittedly simple to use suite. I can't help feeling that StrongLoop may have missed the point and should instead concentrate on their more evangelical/training pursuits.

I found this article which explains everything extremely well. It feels satisfying because you have such control over every aspect without having to write a colossal amount of code. It was also a relief to find MongoLab and Modulus, I used MongoLab to create my mongo database instance in a matter of minutes.

It gives you the URI e.g. mongodb://<dbuser>:<dbpassword>@ds045087.mongolab.com:45087/gfentimencom

There is an option to create users, however your user account already counts as a user. In other words dbuser and dbpassword are the username and password that you use to set up the MongoLab account NOT a user that you may add through the GUI users option. This had me a little confused for a while and caused some complications connecting to the db.

Another gotcha I has when going through the article it specifies port 8080. The chances are that if you run IIS frequently using this port then you will run into problems like this: events.js 72 throw er eacces.

I took this guys advise and changed my port to 3000 which fixed it. 

I don't think it will come as a surprise to you dear reader that I have gone for Express over Loopback. I found the added sense of control much more satisfying!