How to Develop Wick Editor (work in progress)

[StickmanRed]

Setup

I know, there's a lot to download, and a lot of setting things up, but the work should hopefully be worth it!

1. Download Node.js 14. I use the official Node.js website, select the version "v14.21.3", and download the prebuilt Node.js version (choose Windows/Mac installer).
2. Download Git. Go to the Git website and find the download button for your computer.
3. Download VS Code. Press the download button somewhere on the VS Code website. A code editor like this is really useful for coding, because it has about everything integrated with it, along with code checking and all the cool stuff.
4. Set up a npm account. Via the npm website. You'll need this later.
5. Log into your npm account. Official instructions here. Find the folder named "Git" in the apps list, then in that folder click "Git Bash". When a window opens, type npm login, then enter the username, password, and email for your npm account. Then try typing npm whoami to see if you're logged in!

Installation

1. In the "Git Bash" window, type git clone https://github.com/Wicklets/wick-editor/. This will install the Wick Editor source code (clone) on your computer in a folder named "wick-editor". (To contribute to my fork, type git clone https://github.com/StickmanRed/wick-editor/.)
2. In VS Code, click "File" at the top left of the window, then "Open Folder" and navigate to the wick-editor folder (in Windows, this should be C:\Users\[username]\wick-editor) and select it. VSCode will then load your folder, and you can navigate through the files in the explorer panel.
3. If a terminal is not already open, click "Terminal" in the top bar and press "New Terminal".
4. Type in npm install. Note: This will install a bunch of files in a folder named node_modules. These are all the libraries that Wick Editor uses. Make sure you have enough space for them all (around 1 GB).

If all went well, you're officially ready to mess around with the code!

Navigating the code

Wick's internals are quite complex; it takes lots of searching and code-reading to find where you need to work on. I'll be adding a few tips that may be useful!

Testing

1. In the terminal panel, type npm start. Then go to your favorite browser and go to the link localhost:3000. You will see nothing at first, but once the terminal is done with its set-up process, it will display "Compiled successfully! You can now view wick-editor in the browser." Return to the tab and refresh to see your copy of Wick Editor.
2. You only need to do step 1 once. Whenever you make any changes to the code, the page will automatically update.
3. If you made changes in the engine folder, there is one extra step you need to do. Open a separate terminal and type in npm run build-engine, or npm run build-engine-windows if you use Windows. Your page will update after a few seconds (maybe a minute).
4. When you're done testing, go to the terminal where you typed npm start and press Ctrl+C (on Mac it's probably Cmd+C). This will stop the website and localhost:3000 will stop showing Wick Editor.

Deploying

[InternetAstronaut]

Hey! I think we can get it up Node 20. We should stop using C.R.A, and start using Vite!

[niallobrien]

I think the best thing to do would be to try to modernise the whole app, starting with the dependencies and API breaking changes. Thoughts?