I hope the preceding overview has given you a specific idea of what we're trying to accomplish with this application, and also the roadblocks to achieving those aims. There are a lot of challenges, but as we work through our user stories, we'll deal with them one by one, until we have a fast and functional Progressive Web App.
With the challenges mentioned, you can see the general trend: good performance and user experience under any condition. Certainly a worthy goal, and exactly why PWA techniques are applicable to any web app; they simply promise a better experience for everyone.
Once we start building our application, we'll also see that solving these problems is still a challenge, but all very achievable with React.
The next step is to get everything set up for our application, and create our basic folder structure with HTML and CSS.
First things first. Before we start building our React application, let's get set up with the basic HTML and CSS--the skeleton of our application, if you will, upon which we will heap the React muscles:
- Open up your Terminal and switch to whichever directory you want to store your project in.
- Then, we'll make our app directory with
mkdir chatastrophe. Let's go inside that folder, make another folder within it namedpublic, and withinpublic,touch index.html. If you're on Windows, usetype nul > index.htmlinstead oftouch:
- Then, open up the whole
chatastrophefolder in your text editor of choice. I'll be using Sublime Text 3 for this tutorial. Open up theindex.htmlfile, and let's write some HTML!
- Let's start with the basic HTML elements. Create a
<html>tag, and within that,<head>and<body>. - This wouldn't be a programming tutorial without a hello world, so within the body, let's put
Hello world!within an<h1>tag. - Then, open up
index.htmlwithin your browser:
Our goal by the end of the chapter is to display the exact same as the preceding illustration, but using React to render our <h1>.
Why did we put our index.html inside the public folder? Well, our HTML is the first thing our users will download when they hit our page. They will download it exactly as we see it here. This is in sharp contrast to our React JavaScript, which will be transpiled (more on that in the next chapter) before being served to the client. Our React code, as we write it, will be private. Our HTML, as we write it, will be public.
This is a distinction that will make more sense as we move into the React world, but for now, just know that the convention is to put HTML and static assets in the public folder.
Our good friend at the start-up (now dubbed Chatastrophe--what have you done?) has tapped a designer to provide some basic assets for us. These include a send icon for our chat box, and a logo for the application. You're not a fan of the style, but c'est la vie.
Let's go ahead and download the image files from https://github.com/scottdomes/chatastrophe-assets. You can download them by clicking on the Clone or Download button, and then selecting Download as Zip. Then, unzip those into the public folder, in a new folder called assets (all asset files should thus be in chatastrophe/public/assets).
Before we continue, we can ensure that our assets look okay by testing them in our index.html. Above <h1>, let's put in an img tag, with the src set to /img/logo.png, and an ID as test-image:
<img src=”assets/icon.png” id=”test-image”/>
Here's what it should look like:
This is even more beautiful.
The last thing we need to do is add our CSS. By the luck of the gods, all of our CSS has been mysteriously prepared for us, saving us the cumbersome task of styling our application. All we have to do is pull in assets/app.css.
We include it in our index.html with a link tag:
We should see an immediate change to our page. The background should be a gradiant, and the image should now have a slightly pulsing animation:
It worked! That does it for our main assets. Let's move on to some improvements to our HTML.
Our application will be mobile-first, as we have already discussed. To ensure that our HTML is fully optimized, let's add a bit more markup.
First, let's add a DOCTYPE declaration to the top of index.html. This tells the browser what kind of document to expect. In HTML 5 (the newest version of HTML), it always looks like this:
<!DOCTYPE html>
Next, we need to add a meta tag for viewport width. It looks like this:
<meta name="viewport" content="width=device-width, initial-scale=1">
What does this do? Essentially, it tells the browser to display the web page at the same width as its screen. So, if the web page seems to be 960px and our device is 320px wide, rather than zooming out and showing the whole page, it'll instead squish all the content down until it's 320px.
As you might expect, this is only a good idea if your website is responsive and able to adapt to a smaller size. However, since responsiveness is one of our main goals, let's do this from the start. Add this tag within the <head> of our document.
A couple more tags to go! The character set we use on our web page can be encoded in a couple of different ways: Unicode and ISO-8859-1. You can look up these encodings for more information, but long story short, we're using Unicode. Let's add it like so, right below the previous <meta> tag:
<meta charset="utf-8">
While we're at it, let's add the language the HTML is in. On our existing <html> tag, add lang="en":
<html lang="en">
Okay, that about does it for HTML housekeeping. The last thing we need is a favicon, the little icon displayed next to the title in the browser tab. This is included in our assets bundle, so all we have to do is link it up (right underneath our <meta> tags):
<link rel="shortcut icon" href="assets/favicon.ico" type="image/x-icon">
Your browser tab should now look like this:
With that, we're done!
Next, we'll look at how we will include React in our project, and all the other dependencies we will need.