Step 2: Create a basic frontend application

Install an IDE

In this tutorial we will opt for the 'Visual Studio Code' IDE. This IDE has syntax highlighting for JavaScript/HTML/CSS files. Besides, it can interact with Docker, which will also be helpful at a later stage of this tutorial when we will prepare our web application for deploy. The VS Code IDE can be downloaded from the Visual Studio Code site.

A plugin-rich text editor (like Notepad++ or Atom) can also be used; many of them have a syntax highlighting option both for HTML/JS/CSS files and for Docker configuration files.

Download and install an IDE or your choice or a text editor.

Install Node.js

Go to the Node.js site and download the Node.js version marked as 'Recommended for Most Users'.

Install NodeJS.

After installation, check that the installation was successful. Run this console command:

node -v

You should get the NodeJS version printed (for example v18.16.0).

Folder structure

Before we create a Node.js application, let’s make sure that we are on the same page about the file/folder structure.

We assume that all files of the web application will be located inside a single folder (the root web application folder), with backend and frontend subfolders:

Overview of the file and folder structure
<root web application folder>
|
|--backend
|  |--.mnv
|  |--lib
|  |--src
|  |--<other folders and files>
|
|--frontend
|  |--node_modules
|  |--public
|  |--src
|  |--<other frontend files>
|
|--<Docker-related files>

So, all backend source files are expected to be in the backend folder. This will be important on the deployment stage.

Create a new frontend application

Go to the root web application folder and execute this console command:

npx create-react-app frontend start

The frontend folder with the new React application will be created.

Check the result

Let’s check that the application is working.

Go into the created frontend folder and run this console command:

npm start

The application should start.

Open the local application address in the browser: http://localhost:3000/

You should see something like this:

Objects diagram

Now open the frontend project in Visual Studio Code (use File – Open folder command). The project tree should look like this:

Objects diagram