⚠️ This lesson is retired and might contain outdated information.

View source on your remote Zeit Now server

Share this video with your friends

Social Share Links

Send Tweet
Published 7 years ago
Updated 3 years ago

Zeit allows you to expose the inner working’s of your deployment’s source code to aid in debugging or understanding how your code works. Learn how to configure and use this powerful window into your live behavior.

[00:00] Now comes with a pretty awesome little debugging tool called "Cloudview Source," which allows you to look at the source of your service side application right there on the server, if it's set up to be exposed. Let's take a look at what that looks like.

[00:14] First, let's refactor our application a little bit, so that we have a little bit of room to introduce the sneaky bug. Let's create a couple of modules here. Let's go create one called "getGreeting.js," and one called "getdate.js."

[00:32] Let's open "getGreeting" and "module.exports = { return ("hello world") }." Let's open "e; getdate," and let's go ahead and grab this code and just return that. Let's run this, or we're going to import this -- "var getgreeting = require ('getgreeting')," "var getdate =."

[01:27] Here, replace this with it called "getGreeting". Here, we're going to have it called "getdate." So far so good. I just want to publish this. Let's show that everything works as expected. That our refactor is functional. That one gets me every time. Quick bug. There we go. Everything is working as we expect.

[02:24] Let's go ahead and introduce a bug. Let's go into "getdate" and just call this "getISO" string with a lowercase as right. Something that's pretty easy to do. Let's deploy this. In order to use Cloud View Source, your deploying needs to be public.

[02:43] If you're running a free instance as of Now, then all your deployments are always going to be public automatically. If you're running a paid instance, like I am, you just have to pass in the "-P flag." We're going to deploy this in a public way. We're going to go over here, navigate to this end point.

[03:08] Oh, no. ".2 iso string" is not a function. It looks like that's in "getdate.js" line two. What we can do is append "/_src" to our URL. Look at that. This is the actual code that's been deployed. There's no ambiguity. This is definitely the code that has the error in it.

[03:38] This is not some past version, or future version. We know that the error was in "getdate" line two. That allows us to highlight that. Now, here's a cool thing that you can do. Anything that you highlight in this remote view source tool actually generates a new URL.

[04:02] If you're running debug or something, if you're doing QA for your team -- you can highlight that. Say, "Hey, I found the error. I'm going to give you this URL." Somebody can take this, open this URL in another window, open it.

[04:18] See, the highlight is still there. OK, I see what the problem is. I can fix that and redeploy. All your code is here. You can look at this including your start scripts and all of that. This is just a cool extra feature. Again, this is only available on public projects.

[04:32] Generally speaking, you don't want this to be available once you've deployed to productions. Make sure that you're not accessing and redeploying code that anybody can introspect and view the source on because that could be catastrophic. It's a great tool for debugging, and it's a lot of fun.

egghead
egghead
~ 11 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today