7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 What You Need

Progressive web applications are just enhanced normal applications. So you'll need the basics: Node, a modern browser, and a code editor. I use VS Code.

Related Links

2.1 What You Need

Of course, before we do anything with progressive web apps, we need to go over what you need to follow along in this course. Now, the things that we will talk about aren't necessarily a requirement for writing progressive web apps. But you should get them anyway because they are used for just web development in general. The most important being Node.js. If you don't have Node.js, you need to install it. Just download the LTS version. Don't worry about the version numbers because as far as our purposes and most other people's purposes are concerned, the version number doesn't matter. We just use Node to get NPM, which is what we use to, well, do a lot. NPM is such a huge part of modern web development that it is a requirement. So if you don't have Node.js, download it. If you do make sure that you had the latest version, so download the LTS version, install it. The installation is very straightforward. Just take the defaults, and you will be good to go. The next thing that you need is a code editor. And you probably already have one, which is fine. However, I recommend Visual Studio Code because it is the best environment for JavaScript. That sounds like an opinion, it's not, it is the best code editor for JavaScript. But feel free to use whatever you want, because at the end of the day, it's not how you get there, it's that you get to the end of the day. So use whatever you are comfortable with. There are a ton of code editors. Many are free, many are not free. Just find the one that you like if you don't already have one, and try them. I mean there's tons out there. And then finally, you need a browser. And that kinda goes without saying. However, not every browser is the same, although in today's day and age, it's becoming very close that they are all the same. It's fine if you use Firefox, there's no harm in that. However, there are tools built into Chromium-based browsers, specifically for writing Progressive Web Apps. So for this course, I recommend using something based upon Chromium. Now if you are a little leery of using anything by Google, Chromium is just the project. Chrome is built on Chromium, as are a tonne of other browsers. And they don't call home to Google or anything like that. So if you're leery about that, there's plenty of alternatives that use Chromium, and they all have the features that we need. Once again, if you wanna use Firefox, that's great. However, for this course I recommend something based upon chromium. So I'm using Brave, which is more privacy focused than anything else. In fact, it has a built in ad blocker. So just go into brave.com. If that entices you any, and you can use that. Microsoft Edge is now based upon Chromium, which you can download and install if you are on really any version of windows that is not XP or Vista. Of course, there's Google Chrome and there's also opera as well, which nobody uses Opera. But any one of those are gonna be fine. They will have the tools that we need to make developing progressive applications a little bit easier. So with that out of the way, let's go to the command line. And of course you need to go to the command line after you have installed Node because we are going to use NPM to set up the stuff that we need. And we want to CD somewhere to create a folder, I'm just gonna do this at the root of my drive. And I'm gonna call this directory pwa. Feel free to call it whatever you want. And of course we need to CD into that directory. And then we are going to run a command npm init -y. Now the -y is just going to force NPM to answer all of the questions that it would ask for the name, the version, the description, and all of that. That just gives us the boilerplate stuff, and we don't have to go through it step by step. But from here, we want to fire up our code editor, so that we have that running. And then we will run a command called npm install lite-server -- save-dev. Now, if you're not familiar with NPM basically this means that we are going to install a package called lite-server. And we're going to save it as a development dependency. Now lite-server is a lightweight HTTP server, which is a requirement when it comes to progressive web applications. We cannot serve anything off of the file system, it has to be over HTTP. So we can't create files and then just double click them, and expect it to work. It's not gonna. So we need HTTP. So this lite-server is going to give us a very easy way of getting a web server so that we can serve all the files that we need to develop our application. And then from here, we're going to create a new file at the root of our project. And it's gonna be called bs-config.json. And this is just a configuration file for lite-server. The first thing that I'm going to do is set open to false because whenever you run lite-server it will automatically start up the default browser. I don't particularly like that behavior, so I set the open to false. And then we want to tell lite-server where all of our files are going to be. So the next thing is a property called server, which is an object. And it's gonna have a property called the baseDir, base directory. And we can put this anywhere that we want, but I typically use public for my base directory folder. So basically, we're going to put all of our files that are going to be served into this public folder. And everything outside of this public folder, well, is not gonna be served. It's just not, so there we go. That's our configuration file. And then we need to go to package.json, and we need to add an item to the scripts here. So we are going to add one called "serve". And this is simply going to call "lite-server". So we will be good to go there, and that's it. So let's create a new folder. This needs to be at the root of our project called public. And then inside of public we're going to create another file called index.html. Let's give it some markup. With code, you can just type an exclamation point tab. And there you have the markup for HTML. As far as the title is concerned, let's call this Company Status Report. And then in the body, we'll just have content. For now, we just need something on the screen to display, so that we can see that everything's working okay. And then back at the command line, we'll say npm run serve. That's going to start our web server. It's going to tell us where to go, localhost:3000. So let's go to the browser. Let's point it to localhost:3000. And there we go, we have our index HTML. So our project is up and running. It's kind of useless. But in the next lesson, we will add a little bit of functionality.

Back to the top