Introduction

This article marks the start of my PackageJS series. But first thing's first, what is PackageJS?

PackageJs is a low-code application platform that builds high-performance full-stack, at lightning speed while saving you 1000s of hours of development time with an enterprise grade framework. With its RESTful APIs and responsive UIs, it makes development for Node.js and JavaScript easier than ever. Learn more about PackageJS here: packagejs.com

Setting up WSL (Windows Subsystem for Linux)

The Windows Subsystem for Linux (WSL) is a feature of the Windows operating system that enables you to run a Linux file system, along with Linux command-line tools and GUI apps, directly on your Windows computer, alongside your traditional Windows desktop and apps. This allows you to use the power and flexibility of Linux on your Windows computer, without having to learn a new operating system.

To set it up, follow these steps:

Open PowerShell or Windows Command Prompt as administrator by right-clicking and selecting "Run as administrator".
Enter the wsl --install command, then restart your machine. This command will activate the required functions to operate WSL and set up the Ubuntu version of Linux.
The above command only works if WSL is not installed at all, if you run wsl --install and see the WSL help text, please try running wsl --list --online to see a list of available distros and run wsl --install -d <DistroName> to install a distro.

Linux distributions for WSL can be installed from the Microsoft Store. You can either use the store app or search for a Linux distro using the Windows search bar. Select the distro you want to install (e.g. Ubuntu) and follow the instructions.

Select install.

Once the installation is complete, click Launch to open a Linux terminal and finish the setup. You'll need to create a user ID and password for your new Linux instance. You can now run Linux on Windows.

WSL (Windows Subsystem for Linux) is an optional feature that can be enabled on Windows 10 through the Windows Features dialog or using PowerShell.

Enabling WSL via Windows features dialog

To enable WSL, type 'features' in the Windows search bar to open the Turn Windows Features on and off dialog. Then scroll down and check the box next to Windows Subsystem for Linux.

Select OK and you will be prompted to restart Windows.

Enabling WSL via PowerShell

If you prefer, you can open PowerShell as an Administrator and type:

Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux

After the command runs, you will be prompted to restart Windows.

Now you've set up and enabled WSL, you're ready to hook your VSCode IDE up! As we progress I'll walk you through that.

For more information visit: learn.microsoft.com/en-us/windows/wsl/install and code.visualstudio.com/docs/remote/wsl-tutor..

Getting started with PackageJS

Getting started with PackageJS is pretty easy:

First

Visit https://packagejs.myshopify.com/products/intro-kit-unix-vuejs-local to get the PackageJS app builder intro kit for free. Just enter the discount code FREEINTROKIT at checkout and you won't need a credit card to download it for free.

Then...

You can buy expansion bundles for your app builder, including databases, frameworks, and hosts, at https://packagejs.com/db.posts/pricing#expansionfrontend. These bundles come with a lifetime license and are a one-time purchase with no subscription fees.

Or

You can also apply here packagejs.com/db.posts/forms-development-pr.. to become a tester, and qualify to use all PackageJS expansion bundles for free.

After you've done all of that you can then proceed to WSL in VSCode and running the PackageJS app builder intro kit!

For more information visit: forrichgodusen.packagejs.com

Connecting to WSL in VSCode

Install the extension

To make connecting to WSL possible in VSCode you'll need to install the WSL extension.

Perequisite check

After installing the WSL extension, a new item will appear on the far left of the Status bar.

The Remote Status bar item displays whether VS Code is running locally or remotely. Clicking on it will bring up a list of commands for the WSL extension.

After connecting to WSL, you can notice in the lower left corner of the Status Bar that you're connected to your WSL: Ubuntu instance.

Launching PackageJS app builder

In your file explorer, type this into the address bar \\wsl$, this will take you to the WSL directory that holds the Ubuntu file directory where you'd have to extract your starter kit into.

The directory path should look something like this, \\wsl.localhost\Ubuntu\home\richgod\PackageJS, carrying the name you used as your user ID when you were setting up your Ubuntu instance. I stored my own files in a PackageJS folder but you can name your folder anything.
Copy the starter kit from your downloads directory, that's where it is most likely to be, and paste it in the directory you navigated to earlier.

After that extract it's contents there.
In VSCode, you already connected to your WSL instance, but if you aren't, follow the steps above to do that, then select the Open Folder option.
You'll get a minimal file and folder navigator for the Linux file system, not the Windows file system. If you want to switch back to the Windows, select the Show Local option and you'll get the standard Windows File Open dialog.

Select the folder which you stored the unzipped starter kit and select OK.
Once your starter kit has opened up in your VSCode WSL instance, you can then check the instructions in the README.md file and run the command npm run serve in the terminal to launch the application builder on http://localhost:40082
And once you open that in your browser you'll have this:

And there you have it, you've launched your PackageJS application builder!

Conclusion

This is a lengthy one, but I bet it'll come in handy when you want to set up your PC to work with PackageJS. There will be more blogs in this series, as I'll be documenting my learning journey with PackageJS.

To find tutorials to get started on using your application builder, check out PackageJS YouTube channel: youtube.com/@packagejs

I hope you found this helpful, and I'll catch you in the next one, cheers!

PackageJS: How to set up on Windows 10 Pro (WSL)