Connecting Wix Studio to GitHub provides you with a set of tools to write test and publish code from your local Dev environment, working in your favorite IDE, and deploy your changes without ever leaving the command line.
Let's get started.
To connect to GitHub, click on the curly braces, then start coding, next, click on GitHub, connect to GitHub. Now, click continue.
Next, sign in to your GitHub account, you'll fill out the form here to name your repository and click create. Click install to authorize the Velo app to connect to your repository.
If you have two Factor authentication set up on your GitHub account, you'll see this screen next.
Scroll down to repository access, there's a drop down with all of the available repos in your account but you only want to connect to the repo you just created.
GitHub will probably suggest that for you like it has here so we're going to go with that, click approve and install.
This popup has commands that you will need shortly copy them to a safe place for now and if you lose them, you can open your site's main editor and just click local Dev setup to get them back, click close and now you will see in the left hand menu that your repo has connected.
Next open your terminal, there are a few dependencies you will need to have to ensure everything is working as expected, git, node, npm or yarn. I'll be using npm for the demo but yarn is completely fine there's more information about these dependencies and links for how to install everything in the documentation that'll be linked in the description.
Now run npm install with the global flag at Wix/CLI CD into your working directory and paste the Clone command you copied earlier. Once you have successfully cloned your repository you will change directory into the new folder then run npm install, follow the prompts here to authorize the access to your Wix account for the CLI.
Now open up your IDE to the newly created project folder I will be using vs-code but you can use whichever IDE you prefer. First let's take a look at the file structure this readme contains all the documentation that you need about the GitHub integration and CLI you can reference it as needed the source folder contains all the code for your Wix Studio site. Backend contains all of your backend code files. Pages contains frontend page code here the name of the file consists of the name of your page and an ID for internal use page code files are autogenerated for you from the local editor you don't want to try to create page files here and you don't want to change the names of the files here your public files are also located here the Wix config Wix folders and other files here are generated files and can be ignored.
Next open a terminal then run Wix Dev to start up the local editor your local editor will look exactly the same as your production editor pay attention to this label so you always know where you are working the code editor is read-only and this message here will serve as a reminder and include a link to the CLI documentation if you need it. Your code is saved automatically with the local editor when you save it in the IDE, let's add a console.log to the homepage so you can see this in action. After saving head to your local editor and you will see your code there, you can click run to preview your code changes and test out any new features, for changes to the UI such as adding new pages or elements you will start in the local editor so go ahead and add a new page to sync visual changes with your IDE you will click save and then continue in the popup, now in your IDE you will see there is a new code file generated for the test page that we just added, go ahead and add a console.log to this test page as well and save the file.
Now we will commit and push the code to sync with your live editor and go ahead and publish right from the command line use git add to add all the changed files if you want to see them you can use git status. Next create a meaningful commit message, and finally push your code to publish type Wix publish you will select to publish the code from your working branch you can also publish directly from your local code but this will make your repo out of sync before you continue to publish a preview URL is generated if you wish to see the changes. Click this link to open your live site and see that your changes are already published and out on the internet for any of your website visitors.
You can also open the editor and see that the changes from your local editor are also reflected here as you can see our test page is available here in the production editor.
Today you connected your Wix Studio site to a new GitHub repository to work locally and write code and create UI changes all from the IDE and environment of your choice you also were able to publish and affect your live site completely from the command line we can't wait to see what you'll do next.
