Try an included sample
Trying one of the premade example bundles is a good way to get to know the framework and especially the selected service.
Attention
In case you installed the production branch of nodecg-io, you are out of luck. Because the build process will cause problems if you just take one of the samples and rebuild elsewhere.
If you installed dev branch via the nodecg-io-cli
and did not select the
“use the samples”-option run nodecg-io install
and select it.
In case you cloned the repository directly from GitHub, everything should be included. But you may want to pull recent changes and rebuild the project.
Step 1: Run NodeCG
Now you need to start NodeCG. There are a couple of different ways to do this:
Using VS Code
If you have nodecg-io open in your VS Code instance, you can launch NodeCG using
the Run and Debug
Explorer View:
Using the terminal
You may also launch NodeCG using your terminal with:
user@computer:~/nodecg $ npm run start
> nodecg@1.8.1 start
> node index.js
info: [nodecg/lib/server] Starting NodeCG 1.8.1 (Running on Node.js v16.11.1)
info: [nodecg-io-core] Minzig!
// A whole host of logging output
info: [nodecg/lib/server] NodeCG running on http://localhost:9090
Now you can open the NodeCG dashboard (by default) under http://localhost:9090.
Step 2: Log in to nodecg-io
Now navigate to the nodecg-io
tab in the NodeCG dashboard.
If you are logging in for the first time you will have to set your password.
Else you simply have to log in with your previously chosen password.
Now you are looking at the nodecg-io
config menu. It should look like this:
Step 3: Learning how to use the GUI
The current GUI is just intended to make the project usable, but it is not very user-friendly. As a more long term solution, a new GUI will be developed that also focuses on user experience. Until the new GUI is developed, you will have to arrange yourself with this one. So, to get started:
In pink: NodeCG Tabs
Here you will find every NodeCG-bundle that has a dashboard. Here you may select the nodecg-io-debug-dashboard, if it is installed.
In yellow: Monaco editor
It is basically only a text editor which is used to save configurations for service instances.
In green: Services section
Here you may create, update and delete instances of a service. Each instance has its own name and configuration. The menu will expand depending on the option selected in the first dropdown.
Creating a new service instance:
This can be accomplished by selecting the item 'New'
. Then a new dropdown will
be revealed, in witch you may select the service type. Additionally, you must
select an instance name. Then click 'Create'
. The newly created instance
should be selected.
Configure a service instance:
While a supported service instance is selected, you may change the config in
monaco, then click 'Save'
.
Deleting a service instance:
This can be accomplished by selecting an existing instance. Then click
'Delete Instance'
.
In violet: Bundles section
This section has three dropdowns:
- Bundle: Here you can select a bundle to configure.
- Service: If this bundle uses more than one service, you may select the service to set or unset here.
- Service Instance: Here you can select one instance of the service type set at
2 or
none
.
In red: Unset all Button
This button will set the service instance for every bundle/service combination to none, effectively removing the access to every service from all bundles.
Danger
This can not be undone, and you will have to set up all the bundles again. The service instances will be unaffected.
Step 4: Configure the sample
The configurations for every sample bundle differ too greatly from each other to
be included here, so you have to take a look at the documentation for your
sample bundle. You will find it on the left-hand side of this page in the
category Services
.