Here it is — Modern Web App
Before we start building the Modern Web App from scratch, let’s think — what is it exactly?
Modern Web App (MWA) is an application following all the modern standards in web development. One of it is the Progressive Web App which gives us the ability to download a mobile browser version to your smartphone and use it as a standalone mobile application, the ability to browse website offline. It has a material design made by Google, perfect Search Engine Optimisation (SEO) and, of course, high performance.
Here are the insides of MWA:
- Universal Web App with SSR
- 2nd article:
2.1. Material-ui
2.2. Code Splitting
3. 3rd article:
3.1. Example of Redux usage
3.2. Mobile version
3.3. Progressive Web App
4. Babel 7, webpack and much more
Catch the links: GitHub repo, archive with all the stages, and a demo on Heroku. The article is designed for developers who are already familiar with Node.js and React, a little bit of Redux would be great. All the necessary theory is presented in the required amount. Expand your horizons by clicking on the links.
Let’s get started!
1. Universal
Doing routine stuff: create working directory and command git initto your terminal. Open package.json and add a couple of lines:
Do a command npm install and let’s try to understand what do we need.
Since we live in at the turn of 2018 and 2019 year, our web-app has to be universal — the code will be the same both at the backend and the frontend. It means we will use the ECMAScript version not less than ES2017. For this purpose, the entry file index.js is connected with babel/register, and all the ES code was written after it is transformed into browser-understandable JavaScript by babel on the fly with the use of babel/preset-env and babel/preset-react. For the comfortable development, I usually use the plugin babel-plugin-root-import which helps me with importing. For example, all the imports from the root directory will be ‘~/’ and from src/ — ‘&/’ . Alternatively, you can write long paths or use webpack’s aliases.
Time to configure webpack. Create webpack.config.js and write some code (here and after look at the comment)
The most interesting part: working with the server side of our app.
Server-Side Rendering (SSR) is a technology designed to improve performance and solve the discussion about search engine optimization in the Single Page Applications (SEO in SPA). For this purposes, we take an html-template, put the content into it and send to the user. While the server does this thing in milliseconds, there no way to manipulate the DOM. Client-side solves it by rerendering the page, and it becomes interactive. Got it? Do it!
File server/server.js collects the content generated by react and passes it into html-template — server/template.js. Worth mentioning: we use only static router on the server because we don’t want to change page’s URL during loading time. The library react-helmet simplifies the work with metadata (and also the whole tag <head> ).
In the server/template.js, in head let’s write the data from the helmet, add a favicon and global styles from the static directory /assets. In body — content and webpack’s bundle client.js laying in the folder /public. We call it /client.js since /public is also static.
Coming to the easy part — client side. File src/client.js restores generated by server html without updating DOM and makes it interactive (read about it here). React function hydrate deals with it. And now we don’t need static router, use BrowserRouter.
At 2 files react-component App has been seen already. It is the main component of the desktop’s version of the app doing routing. Its code is trivial:
And, of course, Home component. Notice the Helmet — usual wrapper of the <head> tag.
Congratulations! We’ve just done the first part of developing the MWA. Only the couple of strokes are left before testing the app. In an ideal case, you may fulfill the /assets folder with global.css and favicon.ico following the template.js file. Also, we don’t have the starting command. Return to package.json:
See the Prod and Dev? It is the difference made by webpack v4. Read about --mode here.
Please, stop at this moment and rethink all the stated information before going to the second stage: building the material-ui, code splitting.
And try the created app at localhost:3000
Next step: material-ui and code splitting.
Third step: simple redux counter, mobile version and PWA.
If you like this tutorial, please don’t be shy to clap 👏.
