Coding with Velo: Frontend

Hey there, and welcome to the Velo Frontend course.

I'm Joshua, Developer Advocate, and I'm going to be showing you how to use the frontend for Velo by Wix.

So throughout this course, we're going to be doing a number of things, from creating static and dynamic event handlers, creating a simple hello world example, and even using our own Wix internal APIs, like storage, window, and on top of that, we're going to be also learning how to use some of our tools like the release candidate and logging and monitoring.

So you'll be able to combine all these skills together, and by the end, you'll be able to be a solid frontend developer with Velo by Wix.

Hey, and welcome to this lesson.

And we're going to go over the tour of the Editor, primarily for the frontend.

So before we get started, we have to turn on Dev Mode to enable Velo.

So we just go here to the top of the screen, and we'll turn on Dev Mode.

So Dev Mode gives us access to add our own JS code, connect to Wix internal tools and our own APIs that we're going to be going over throughout this course.

So we'll turn on Dev Mode, and you see that we got started without any setup.

So I already have some code here, and you'll notice that I have some new things on the screen here, from the Code Panel and even the Velo Sidebar.

So we're going to start here with the Code Panel or the IDE.

So the Code Panel has different tabs depending on the page that you're opened on.

So right now we're on the Velo Frontend page, and then we also have another tab here for the masterpage.js.

masterpage.js is a file that controls all of the pages on your site.

So you can add code here to make different functions happen on every page.

So for example, you have your headers and your footers, maybe you have a search bar at the top of your header that you want to show up and operate the same way on every single page.

You can do that.

So back to the Velo Frontend tab, it's pretty easy to navigate back and forth.

We also have our Code Panel or our IDE.

So our IDE has its own ES linter inside of it.

It's kind of similar to VS Code.

And it also has autofill and autocorrect.

So if I go here and I import a new API, you'll see that I get a list from this autofill here.

So I can choose a lot of APIs from wix-data, wix-crm-backend, wix-animations, wix-stores, to work with that vertical, you name it.

So if I type in wixLocation, which is a frontend API that we'll be going over in this course, you'll see that it's here, but we also notice that I'm getting some errors as well.

So that's one thing that our editor can do for us and lets us know if we have any duplicates or anything wrong with our code.

So we'll just go here and delete wixLocation since we already have it in our code.

And we can even go here and right-click and format our code to make it look nicer.

So, as we select different elements on our page, on our Editor, you'll notice that we have a new piece here to our Code Panel, and that is our Properties Panel.

Our Properties Panel lets us manage all of our different elements on the page as we click them.

So you'll see here, I have our "welcomeMessage".

That's the ID that I set it as.

And I can always go here and edit our ID name.

Below, we have our default values.

These default values are Hidden and Collapsed, and that just depends on the element that you have selected, right?

So our Hidden and Collapsed, we can set these as default values so that, when the page loads, it would automatically have done these actions.

So we can even do this programmatically, with code as well, but you have your default values you can select here to boost things up.

So below that, we have our Event Handlers, and our Event Handlers have all of our different static event handlers that we can add depending on the element that we've chosen.

And this also depends on the data type as well.

So if it's a text or if it's a button, it's going to be different event handlers for each type of data type.

So now on to the Velo Sidebar.

The Velo Sidebar has a lot of options but primarily for the frontend, we're going to focus on Page Code.

Page Code has a folder here called Main Pages, and this is where I can access all of my different pages that I have throughout my project.

So as I click the different pages, you'll notice that in the Code Panel, the tab is changing.

All right? So each page has its own way of adding code and controlling it.

Below that, we also have area here for Wix Members, and if I added Wix Stores or even Bookings or Events, it would add more frontend pages to my Page Code option here.

And then on the bottom of the that, we have our Lightboxes, which we're going to be going over throughout this course as well with wix-window and wix-location.

And then not last but not least, we have our masterpage.js which we just talked about.

So these are all the tools that you can get up and ready to go with your frontend development.

You can also use the Velo Tools here on the side to check out the Release Manager, Secrets Manager, Monitoring, which we're going to be talking about a little bit more later on the course.

If you need any help, you can click here for Velo Help to check out our API Reference.

And then you can even look at our conversations in the forum as well.

So that wraps up the tour of the Editor, and we'll see you in the next lesson, where we're going to be going over a very simple example of hello world with Velo.