How do I install Blockly?

[Clyde Eisenbeis]

I downloaded Node.js via https://nodejs.org/en => node-v18.17.1-x64.msi.  Then I ran node-v18.17.1-x64.msi which did the installation.

 How do I run npm?  How do I install Blockly?

[Maribeth Moffatt]

Hello,

The fastest way to start is with the Getting Started codelab. This codelab installs Blockly from a cdn in a <script> tag within an html page, and you can just load that local html file in a browser to see your work. This approach works fine for quick demos and exploratory projects, or if you have few dependencies. You can follow the same approach in your own application. If you don't want to deal with the hassles of modern JavaScript development, this is your best bet.

However, many web apps today are using tools that provide greater power and flexibility: you might want to write your app in TypeScript, manage multiple dependencies easily, or minify the code you write to make your site load faster. If you want to start on that path, we have a sample app (JavaScript version or TypeScript version) that bootstraps this for you. The README explains how to get started and what each file does.

Other resources that may be helpful:

- Beginners' guide to npm

- Blockly's Getting Started documentation

You also may want to seek out advice about using the general JavaScript ecosystem of tools in a more general forum like Stack Overflow. We will do our best to answer tooling questions, but we are best equipped to answer questions about the library itself.

Best of luck,

Maribeth

[Clyde Eisenbeis]

I'm new to Java.  I like your Blockly tutorial!!!

I'm not familiar with "a cdn in a <script> tag within an html page", so I downloaded Codelab with a command prompt.  Please clarify how I could do this with a browser?  Should I have used a browser?

Note that I have written code for many years starting with Fortran with keypunch cards. :-)   I have used Visual Studio for a long time (Assembly, C, C++, C#). 

After downloading Codelab I have the blockly-samples-master folder / files. 

How do I proceed?  Visual Studio, or some other IDE?  What do you use for the YouTube tutorials?

[Maribeth Moffatt]

Let me back up a bit to explain some basics. Pardon me if you already knew any of this. Just want to make sure I'm not talking past you.

Blockly is a front-end library, not an application itself. It is meant to be incorporated into a web page or web application. You can use Blockly to design an application that teaches people how to code, or allows them to program robots or create rules for crypto-trading bots. Blockly is only a part of those applications, and isn't an application itself. So from here on out (and indeed in the entirety of our documentation on our developer site) I'll assume that you are trying to create a web application that uses Blockly.

Blockly is a JavaScript library (note that JavaScript is totally unrelated to Java, despite the name). So when we talk about "installing Blockly," we mean installing it into your web application, in other words, loading the JavaScript that makes up the Blockly library onto your page, and making it accessible to other JavaScript that you've written. One way of doing that is to load the code in from a file, and in particular a file hosted on the internet by a "content delivery network" (cdn). If you're in the dark about how to write JavaScript in a web page at all, I'd recommend that you pause here and do some outside reading. The Mozilla docs are best in class for learning about concepts related to web development. You could start here, and there's tons of related pages that would be interesting for you based on what you already know or not.

So to jump ahead a bit, you've downloaded the blockly-samples repository. Find the file at `blockly-samples/examples/getting-started-codelab/complete-code/index.html` and open it in your browser. That's the completed version of the codelab including the working Blockly application. You can find the starter code at `blockly-samples/examples/getting-started-codelab/starter-code/index.html` and follow along with the codelab from there. You can open that file in your browser to see what it looks like to start, then edit the file in your text editor as instructed.

I would recommend using Visual Studio Code which is different than Visual Studio and more suitable for a wider variety of programming languages. It's what I use personally :)

Good luck to you! If you are totally brand new to web development, I would warn you it will be challenging to start right away with using Blockly, so you are jumping right in the deep end. Our team will be happy to help answer your questions related to the Blockly library, but if you have additional questions on the basics of web development or JavaScript, our team does not have the bandwidth to provide ongoing support.

Best,

Maribeth

[Clyde Eisenbeis]

No problem!  I appreciate your comments!!!   Thanks for clarifying!!!

I've created websites via WordPress and html.  But no Java.

I have read about Visual Studio Code.  It appears that it cannot be purchased.  It is available via a free download, or a subscription.

The downside of the free version, as I understand, is that the code written is kept in a database.  When uninstalled, all of the code is deleted.  Do you know much about that?

[Christopher Allen]

Hi Clyde,

 

I've created websites via WordPress and html.  But no Java.

Just a note, in case there was any confusion: Java and JavaScript (also known as ECMAScript) are two totally different and unrelated programming languages, despite the similarity of name.  Blockly is a JavaScript library, and you don't need to know anything about Java to use it (but you will need to know some things about JavaScript.)

I have read about Visual Studio Code.  It appears that it cannot be purchased.  It is available via a free download, or a subscription.

The downside of the free version, as I understand, is that the code written is kept in a database.  When uninstalled, all of the code is deleted.  Do you know much about that?

I'm afraid that I'm an emacs user and haven't myself used VS Code.  There's no reason you need VS Code to work with Blockly, though: any text editor that can create .html files (and later .js files) will work just fine.

Best wishes,

Christohper

 

[Neil Fraser]

Am Sa., 2. Sept. 2023 um 18:38 Uhr schrieb Clyde Eisenbeis <cte...@gmail.com>:

I have read about Visual Studio Code.  It appears that it cannot be purchased.  It is available via a free download, or a subscription.

The downside of the free version, as I understand, is that the code written is kept in a database.  When uninstalled, all of the code is deleted.  Do you know much about that?

I've been a user of the free version of Visual Code Studio for the past year.  In my experience it is a solid editor with no funny business.  All your code is stored on your hard drive, just the way it should be.  No worries there.

--

Neil Fraser, Switzerland
https://neil.fraser.name