Part 1 — Starting With An Empty File

Welcome to part 1 — “Starting With An Empty File”. In other words, starting with a blank file in your coding editor (i’ll be using VSCode) and finishing with a fully functional local search directory!

Before we begin, take a look at the dependencies and devDependencies in the package.json file. You’ll use these packages throughout the tutorial. For now, simply npm install each dependency into your app with their appropriate commands. To be sure you’re installing with the correct command, you can look them up on npmjs.com. For example, searching that site for the axios package will lead you here, where you will find the install instructions /command— npm install axios.

Now, we’ll start by setting up the global HTML and CSS files. Create a file with the extension .html. You can technically name the file something different but it’s best practice to call this the “index.html” file. Here, you will add boilerplate HTML including a title element (that is shown in the browsers tab bar), a link element (to connect your app with your stylesheet), a root element (representing the top-level element of your app), and a bundle element (to bundle Javascript files for usage in your browser).

Create a file called “styles.css” in a folder called “css”. Put this folder in another folder called “assets” (we’ll add more to the assets folder throughout the tutorial). You can leave the file empty for now, but we will add its path to our index.html link tag as the src. We’ll also add this css path to our server file next.

**Note: As you follow each step in this tutorial you can always look at my file tree in the repo and mimic how i’ve arranged my files and folders.**

index.html file

Secondly, we’ll add the necessary routes to our server file. Create a file with the extension “.js”, it’s common practice to call this file “server.js”. Here, you will define your server. Create a port that listens on port 3000. A port is a number used to identify the source of data when it arrives at a server. When debugging, it helps to console log that you’re listening on your port. If you don’t see the log, your port is not running.

We then need to require body-parser. This parses through the bodies of each request before they reach the route handlers. Find more info on the body parser here.

Next, we’ll serve our static files (ex. CSS). Static content is any content that can be delivered to an end user without having to be generated, modified, or processed; The server delivers the same file to each user. To do this, we use Express’ built in middleware “express.static”. You can serve the entire folder the static content is in or simply the static file itself.

We also need to serve the index.html file on the route to ‘/’. Because this is where our root element lies — meaning it is the sole parent to all other elements. In other other words, it’s the start of everything we want to render to the page. We do this by sending the entire file with Express’ method “res.sendFile”.

We can then set up our catch all and global error handlers. These alert you of errors that occur in the app. Order matters here, these error handlers must go last. If they are placed above other routes, the compiler will read them first and throw an error while all the routes beneath the error handlers will be ignored. Keep in mind that the global error handler needs to have all 4 parameters (req, res, next, and err) or else it throws an error. Find more info on the error handling details here.

Now we’ll start setting up our frontend. Using React, we’ll create our top level component. We’ll call it “App.jsx”. Capitalizing component names distinguishes them from other files. In this file, we’ll set up some generic text to render to the page. Define a class component and, within its render function, add a div with the text “Hello World”.

JSX is an extension of Javascript. It is very often used with React to create elements. React doesn’t require JSX but it is widely popular because it allows us to easily combine rendering logic with UI logic. Find more info on JSX here.

App.jsx file

Next we set up the “index.js” file. Create this file within the assets folder. This is the entry point to our app. Here, in our render method, we attach the app to the root element in the index.html file using the “getElementById” method. We also import our static files here so they can be bundled with Webpack along with the app (more info on Webpack next!).

index.js file

Using Webpack is necessary because without it the browser wouldn’t be able to read/interpret our files. It takes pieces of JavaScript and its dependencies and bundles them into a single file for use in the browser.

You installed all dependencies earlier but make sure you installed webpack (with “npm install webpack webpack-cli — save-dev”) for this step. Then, create a file called webpack.config.js. In that file, require Path and declare an object with module.exports. Within that object define the following keys:

1. entry - the entry point to our app — a means of getting to the top level file of our build. This can be the top level file (App.jsx) or an array of files. We are using index.js here because that’s where we’ve hung our top level file.
2. output - an object detailing our output configuration. In our build, we specify the name of the file we want Webpack to build and the folder/path to give that file.
3. mode - tells webpack to use its built-in optimizations accordingly. We will tell ours to toggle between production and development mode. Webpack’s default mode is production.
4. module - is set to an array of rules objects. The objects are matched to requests (based on how the test key is defined) when modules are created. These rules can modify how the module is created. They can apply loaders to the module, or modify the parser. (Ex: files/modules ending with .jsx are matched to the rule object where test is defined as /\.jsx?/ and are created according to those rules).
5. devserver - to allow us to proxy from port 3000 (the port we set up in the server) to port 8080 the port we will use in development mode. This is helpful for developers when editing their website. Production describes the environment you are providing to the customers. Development is the environment which the developers work on. To run in production mode use npm start. To run in development mode use npm run dev.

In the command line run “webpack”. Once a webpack.config file is present, the “webpack” command will build your application based on the configurations made available in the file.

webpack.config.js

Finally, we can run our app and we should see everything we’ve rendered to the page! Open two terminal windows — in one run “npm start”, in the other run “npm run dev”. For now, when we run our app we should see “Hello World! :)”. Change the text in App.jsx to render something different.

In part 1 you’ve successfully created a frontend using React and a backend using Node.js and Express.

In part 2 we will set up more components using React and React Router.

In further parts we’ll connect a database, and add authentication for users to login and save to data to their profile.

Let me know if you have any questions or updates that would optimize any code!

-> Continue to part 2 now!