[TUTORIAL] How to setup playcanvas-sync from first step to the last step

Useful Resources
,
1

Hello everyone, i’m here to show you how to setup the playcavas-sync to code on your own IDE (vs code, sublime text or other), you can check both of GitHub - playcanvas/playcanvas-sync: Real-time synchronization of files between PlayCanvas and your local machine and playcanvas-sync/step-by-step-guide.md at main · playcanvas/playcanvas-sync · GitHub so let’s start now:

First thing you need is to install the node.js from their own website Node.js and follow the steps to install it on your pc after that go to the playcanvas-sync website (GitHub - playcanvas/playcanvas-sync: Real-time synchronization of files between PlayCanvas and your local machine) and install it from github when it’s installed make sure to unzip it and move it to desktop after doing all this open the node.js command prompt and clone the playcanvas-sync like this:
image
for me it’s the main folder but when you install it and you check it you will see two folders you can move the second folder which has all files that you need in the desktop or you can do like this:

C:\Users\<username>>cd desktop

C:\Users\<username>\Desktop>cd playcanavs-sync-main

C:\Users\<username>\Desktop\playcanvas-sync-main>cd playcanvas-sync-main

C:\Users\<username>\Desktop\playcanavs-sync-main\playcanvas-sync-main

when you finish this step you can install dependencies from the playcanvas-sync folder like this:

C:\Users\<username>\Desktop\playcanavs-sync\playcanvas-sync>npm install

Or

C:\Users\<username>\Desktop\playcanavs-sync-main\playcanvas-sync-main>npm install

After this, you can either run the tool from the playcanvas-sync folder, or install it globally like this

C:\Users\<username>\Desktop\playcanavs-sync\playcanvas-sync>npm install -g

Or

C:\Users\<username>\Desktop\playcanavs-sync-main\playcanvas-sync-main>npm install -g

After all of this open your playcanvas project and open the dev tools using “CTRL + Shift + i” on windows or “Command + Shift + i” on macBook and move to the console and paste this:

copy({
  PLAYCANVAS_BRANCH_ID: config.self.branch.id,
  PLAYCANVAS_PROJECT_ID: config.project.id
})

When you paste it it will say “undefined” but reclick on the “CTRL + V” to show up the branch and the project id. After finishing this step make sure to create a folder to setup the game script but make sure that you didn’t delete the pcsync folder like this:

image
image362×687 95.8 KB

Now, move to your home directory, you can follow this pictures

1

image
image1366×666 42 KB

2

image
image1366×583 27.2 KB

3

image
image1366×393 20 KB

My pc language is french you can use translator to translate the folders name also my pc is called “USER” but on your pc is <username>

Other way to do that is open node.js and do like this:

image

Now, open vs code or another text editor on your project folder and create two files called .pcconfig and pcconfig.json and follow this steps:

1- in the pcconfig.json paste both of branch and project id on it like this:

{
  "PLAYCANVAS_BRANCH_ID": "abc",
  "PLAYCANVAS_PROJECT_ID": 10,
}

2- in the .pcconfig file should look like this:

{
  "PLAYCANVAS_TARGET_DIR": "C:\\Users\\<username>\\Desktop\\<your project folder>",
  "PLAYCANVAS_API_KEY": "xyz",
  "PLAYCANVAS_BAD_FILE_REG": "^\\.|~$",
  "PLAYCANVAS_BAD_FOLDER_REG": "\\."
}

Ps: here is how to get the API key:

image
image1363×313 10.8 KB

When you click on the “Generate token” button it will show up a code now copy and paste it on the “.pcconfig” now make sure to save both files, alright now copy the .pcconfig file to your home directory it should looks like this:

image
image801×118 7.52 KB

Now, open the node.js command prompt and clone your project folder and type “pcsync pullAll” to download all remote files like this:

image

and click “enter” it will show up all scripts that your project has and [y/n] in the end basically “y” is for yes and “n” is for no when you type “y” it will start dowloading all scripts on your project folder.

check this: GitHub - playcanvas/playcanvas-sync: Real-time synchronization of files between PlayCanvas and your local machine to see all pcsync utilities.

That’s how to setup playcanvas-sync hope it will be helpful for everyone, thanks @yaustar for helping me, if you had any problem contact me on discord: TheGiantNinja#6359 or dm me here.

5 Likes