In this section, you can find information about the features and implemented modules available in REST App.
REST App integrates the i18next library to help localize the application using a complete internationalization solution for the web and server applications. The project provides the functionality to automatically detect and remember the language, as well as remember the language selected by the user.
REST App has a mechanism to handle Server Side Rendering (SSR). Once the client application requests a web page, the back end fully renders the user interface. Then, the front end updates itself when the user interacts with it.
You may consult the REST App configurations to know how to enable and disable SSR.
The Knex code for accessing SQLite is included as an example of using arbitrary data source. You can use any NoSQL storage or other data source in a similar way.
Debug SQL prints out excluded queries, with respective times in development mode. To set up debugging SQL, consult REST App configurations.
REST App provides great styling possibilities by integrating a few generic style libraries.
The demo web application uses the Sass version of Twitter Bootstrap. To help you style the React components, the project was integrated with Styled Components. The React Native mobile application uses NativeBase.
Additionally, you can use Ant Design instead of Twitter Bootstrap for the web application, and Ant Design Mobile instead of NativeBase for the mobile app.
We integrated Google Analytics into REST App with the help of React Google Analytics.
REST App stands out compared to similar starter projects in that it uses webpack not only for building the code for the client application, but for the server application as well. Using webpack for the server application adds powerful features such as conditional compilation, embedding non-JavaScript and CSS files into the code, hot code reloading, and other convenient functionalities.
To ensure that the code can be shared among all the REST App packages – client, server, and mobile – we set up webpack to build the bundles for React Native mobile app with the help of Haul CLI. Haul CLI and webpack are coordinated with Zen to replace Metro, a Facebook custom bundler for React Native apps.
The created React Native bundles use Expo, which allows you avoid using additional tools for compiling the native code. Consequently, it's simpler to develop native mobile applications with REST App.
We set up REST App to ensure that webpack vendor DLL bundle is generated and updated automatically for all the non-development dependencies. We ensured that webpack processes vendor libraries only when they were actually changed, not on every change. This approach boosts the speed for cold project start in development mode and for hot code reloading even if the number of dependencies is very large.
Automatic code reloading for the server is done using webpack. When webpack prepares hot patches on the filesystem, the SIGUSR2 signal is sent to the Node.js application, and embedded webpack Hot Module Runtime reacts to this signal and applies patches to running modules from the filesystem.
The hot code reload for the front end is implemented with webpack-dev-server and the Hot Module Replacement plugin. Hot patches for React components are applied on the front end and back end at the same time, so React won't complain about the differences between the client and server code.
REST App uses a popular transpiler Babel for transpiling the ES7 and ES6 code to ES5.
ESLint and TSLint will help you stick with the proper code style. REST App automatically checks any changes in JavaScript files with ESLint and the changes in TypeScript files with TSLint before they're committed to Git.
REST App is set up for React and React Native for the client and mobile applications
respectively. When building React and React Native components, you can use both .jsx and .tsx extensions as the
project supports the JSX and TSX syntax.
React Helmet is a small library for React applications that's used for creating a declarative and dynamic HEAD
section for HTML pages. Put simply, using React Helmet in the project, we create the <head></head> with metadata,
styles, and title for the React application.
REST App supports React Hot Loader, although we turned off this library by default. The project uses only the Hot Module Reloading webpack plugin for hot reloading of your code. We believe that the HMR plugin for webpack covers all practical needs during development.
Using React Hot Loader in conjunction with webpack HMR makes hot reloading less predictable, which leads to various errors. Consult the [Configuring REST App] section if you still want to use React Hot Loader.
Most project code is written in TypeScript to ensure type safety, but you can freely mix JavaScript for developing your modules when TypeScript starts restricting your possibilities.
Just as JavaScript, TypeScript is also compiled to ES5 code.