Join the Conversation!
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
Project setup
Loading...
Loading...
0 Comments
"Please login to view comments"
Upgrade your account
"Please login to view comments"
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
How did you manage to remove the blur property and reach here?
Upgrading gives you access to quizzes so you can test your knowledge, track progress, and improve your skills.
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
##Looks like we found a thief monkey By the way, I liked the trick how you reached till here. You have a good sense of humor. You will improve a lot if you join our course with this passion.
var (function-scoped, outdated)let (block-scoped, modern and recommended)const (block-scoped, cannot be reassigned)_, or $let let = 5; is invalid)myVar and myvar are different)string, number, boolean, null, undefined, bigint, symbolObjects, Arrays, Functions
Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.
00:00:02 To get started working on our amazing subscription tracker API, open up your desktop and create a new folder.
00:00:09 You can call it something like subscription-tracker.
00:00:13 Once you do that, open it up within your code editor of choice.
00:00:17 Any editor is fine, but in this course, you'll see me use WebStorm.
00:00:21 It's more than an editor.
00:00:22 It's an IDE.
00:00:24 And as of recently, it became completely free for non-commercial use.
00:00:28 So once you're there.
00:00:29 either open up a new dedicated terminal window, or you can use one built right into your editor or IDE.
00:00:35 It'll look something like this.
00:00:37 So, let me show you how you can very quickly spin up a new Express application.
00:00:41 We can do it by using something known as an Express Generator.
00:00:45 Simply run mpx express-generator and add a no-view flag, which will skip all the front-end stuff since we're focusing just on the backend.
00:00:55 Also add a dash dash git flag and the name of the app, which is that slash, meaning to create it in the current repo.
00:01:02 And then press enter and continue.
00:01:04 As soon as you do that, you'll see a couple of files and folders that were created for you.
00:01:08 We'll start from scratch.
00:01:09 So let's delete most of the stuff that we don't need.
00:01:11 We can delete the bin, public, and the routes folders.
00:01:16 and clean up the contents within the app, as we'll create everything from scratch.
00:01:20 First things first, we'll need to install something known as node-mod.
00:01:24 So let's run npm install –save-dev to save it as a dev dependency and say node-mod.
00:01:32 What Node-mon does is it always restarts your server whenever you make any changes in the code.
00:01:38 I'll show you how it works very soon.
00:01:40 To make it work though, we have to head over to our package.json, which was generated for us when we ran that express generator.
00:01:47 Within here, you can change the name of your app to something like subdub.
00:01:51 It's a funny name that we chose for this entire API.
00:01:55 And below private, above scripts, you can add something known as type of module.
00:02:01 This will allow us not to use that old require syntax, but rather new ES6 import modules, but rather new ES6 plus imports.
00:02:12 And we also have to change some scripts.
00:02:14 First, we can have a start script, which will simply run node app.js.
00:02:19 And we can also have a dev script, make sure to put it in double-quoted strings, which will run the nodemon version of that same app.
00:02:27 Let me show you the difference.
00:02:28 If I now head over into the app.js and add a console log, server running, if I open up the terminal and run npm start, you'll see server running,
00:02:41 but immediately after, it stops tracking it.
00:02:44 So if I say server running on localhost 5000, nothing will happen.
00:02:50 I would need to rerun it every time I make a change to be able to see this difference.
00:02:55 But if I now run it by using the npm run dev command using nodemon, you'll see that now it's tracking it.
00:03:02 And it says server running on localhost 5000, but if we change it to something like 3000, the changes will be automatically reflected in your terminal.
00:03:11 Great.
00:03:12 Now that we got that out of the way, let's also make our development process smoother by setting up a linter.
00:03:18 A linter will allow us to keep our code base clean so we can add more code in a clean way as we continue scaling our API.
00:03:25 We'll install the most popular linter called eslint by running mpx eslint –init.
00:03:32 It'll ask you a couple of questions, such as how would you like to use it?
00:03:36 In this case, we're going to use it to check syntax and find problems.
00:03:40 Next, what type of modules are we using?
00:03:42 We're using the modern import-export.
00:03:44 In this case, we're not using a framework, so I'm going to select none of these.
00:03:48 Does your project use TypeScript?
00:03:50 In this case, it's going to be no.
00:03:52 If you want to follow along and try to implement TypeScript on your own, that's totally okay with me, but for simplicity's sake,
00:03:59 so we can focus on what matters, I'll say no.
00:04:02 Our code will run in Node, so follow the steps right here to toggle off the browser and turn on the Node.
00:04:09 It'll tell you that for this to work, you need to have a couple of dependencies.
00:04:13 So say, yes, install them right now using npm.
00:04:17 And there we go.
00:04:17 The dependencies have been installed.
00:04:19 And right now we have a new eslint.config.js, which will make sure that we keep our code clean.
00:04:26 Depending on which editor you're using, you might have to head over to ESLint settings and then turn it on manually by pointing it to that specific package.
00:04:35 Same thing for the configuration file.
00:04:37 And then we can run it on save.
00:04:38 This will be a bit different for each editor, but don't worry about that too much.
00:04:42 With that in mind, we have now prepared our code base so we can start creating our Express server.
00:04:48 So let's do that next.