Getting started with web development#

Before you start#

Before we can use the SimpleSwitch™ SDK for web applications we need to download the SDK extension. For this you need to run from the sourced SimpleSwitch™ SDK

$ GITHUB_TOKEN="<your personal access token for Github>" GITHUB_USERNAME="<your Github username>" simpleswitch-sdk-tool install browser
$ eval "$(simpleswitch-sdk-tool activate)"

Github personal access token

To create a Github personal access token see Github container registry (GHCR)

Example web Project#

Here is a very small html page src/index.html:

<!-- SPDX-FileCopyrightText: (C) 2023 Avnet Embedded GmbH -->
<!-- SPDX-License-Identifier: LicenseRef-Avnet-OSS-1.0 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
  </head>
  <body>
    <main>
        <h1>Welcome to My Website</h1>  
    </main>
  </body>
</html>

Build with simpleswitch-generate-package#

You can use the --copy-dir option of the simpleswitch-generate-package from the Generate a SimpleSwitch™ package script

$ simpleswitch-generate-package --name simpleswitch-example --copy-dir src/:/www/webapp/ \
 --template browser --startup-command \
 "lighttpd -f /usr/share/www/lighttpd-webapp.conf && XDG_CACHE_HOME=/tmp COG_PLATFORM_WL_VIEW_FULLSCREEN=1 cog -P wl --enable-javascript=1 http://127.0.0.1:8888"

Deploy to the target#

Now it is time to deploy the generated SimpleSwitch™ container to the device. For this please see Deploy a SimpleSwitch™ package