docs: expand tutorial (#34604)

* docs: base tutorial update

* more docs

* zzz

* remove unused images
This commit is contained in:
Erick Zhao 2022-06-22 04:17:48 -04:00 committed by GitHub
parent a5869fe997
commit e410109a3d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
23 changed files with 2009 additions and 202 deletions

View file

@ -1,10 +1,11 @@
# Introduction
---
title: 'Introduction'
description: 'Welcome to the Electron documentation! If this is your first time developing an Electron app, read through this Getting Started section to get familiar with the basics. Otherwise, feel free to explore our guides and API documentation!'
slug: /latest/
hide_title: false
---
Welcome to the Electron documentation! If this is your first time developing
an Electron app, read through this Getting Started section to get familiar with the
basics. Otherwise, feel free to explore our guides and API documentation!
## What is Electron?
# What is Electron?
Electron is a framework for building desktop applications using JavaScript,
HTML, and CSS. By embedding [Chromium][chromium] and [Node.js][node] into its
@ -12,20 +13,12 @@ binary, Electron allows you to maintain one JavaScript codebase and create
cross-platform apps that work on Windows, macOS, and Linux — no native development
experience required.
## Prerequisites
## Getting started
These docs operate under the assumption that the reader is familiar with both
Node.js and general web development. If you need to get more comfortable with
either of these areas, we recommend the following resources:
* [Getting started with the Web (MDN)][mdn-guide]
* [Introduction to Node.js][node-guide]
Moreover, you'll have a better time understanding how Electron works if you get
acquainted with Chromium's process model. You can get a brief overview of
Chrome architecture with the [Chrome comic][comic], which was released alongside
Chrome's launch back in 2008. Although it's been over a decade since then, the
core principles introduced in the comic remain helpful to understand Electron.
We recommend you to start with the [tutorial], which guides you through the
process of developing an Electron app and distributing it to users.
The [examples] and [API documentation] are also good places to browse around
and discover new things.
## Running examples with Electron Fiddle
@ -39,21 +32,44 @@ a code block. If you have Fiddle installed, this button will open a
`fiddle.electronjs.org` link that will automatically load the example into Fiddle,
no copy-pasting required.
```fiddle docs/fiddles/quick-start
```
## What is in the docs?
All the official documentation is available from the sidebar. These
are the different categories and what you can expect on each one:
- **Tutorial**: An end-to-end guide on how to create and publish your first Electron
application.
- **Processes in Electron**: In-depth reference on Electron processes and how to work with them.
- **Best Practices**: Important checklists to keep in mind when developing an Electron app.
- **How-To Examples**: Quick references to add features to your Electron app.
- **Development**: Miscellaneous development guides.
- **Distribution**: Learn how to distribute your app to end users.
- **Testing and debugging**: How to debug JavaScript, write tests, and other tools used
to create quality Electron applications.
- **Resources**: Useful links to better understand how the Electron project works
and is organized.
- **Contributing to Electron**: Compiling Electron and making contributions can be daunting.
We try to make it easier in this section.
## Getting help
Are you getting stuck anywhere? Here are a few links to places to look:
* If you need help with developing your app, our [community Discord server][discord]
is a great place to get advice from other Electron app developers.
* If you suspect you're running into a bug with the `electron` package, please check
the [GitHub issue tracker][issue-tracker] to see if any existing issues match your
problem. If not, feel free to fill out our bug report template and submit a new issue.
- If you need help with developing your app, our [community Discord server][discord]
is a great place to get advice from other Electron app developers.
- If you suspect you're running into a bug with the `electron` package, please check
the [GitHub issue tracker][issue-tracker] to see if any existing issues match your
problem. If not, feel free to fill out our bug report template and submit a new issue.
<!-- Links -->
[api documentation]: ../api/app.md
[chromium]: https://www.chromium.org/
[node]: https://nodejs.org/
[mdn-guide]: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web
[node-guide]: https://nodejs.dev/learn
[comic]: https://www.google.com/googlebooks/chrome/
[discord]: https://discord.com/invite/APGC3k5yaH
[examples]: examples.md
[fiddle]: https://electronjs.org/fiddle
[issue-tracker]: https://github.com/electron/electron/issues
[discord]: https://discord.gg/electronjs
[node]: https://nodejs.org/