Version 0.58.6

Getting Started

In the following steps, we provide a brief introduction on how to initiate a new project. Throughout this introduction, we will refer to the project as ‘mysite’.

To start a new SDC project, open your command line and cd to the directory where you want to start your code. Then, execute the following commands:

$ pip install simpledomcontrol
$ sdc new

Quick and dirty

Navigate to your project container directory and run the following cli commands:

PROJECT_NAME=<ADD_PROJECT_NAME>
pip install django
django-admin startproject $PROJECT_NAME
cd ./$PROJECT_NAME
virtualenv venv
source venv/bin/activate
pip install simpledomcontrol
sed -i "s/INSTALLED_APPS = \[/INSTALLED_APPS = ['sdc_core',/g" ./$PROJECT_NAME/settings.py
python manage.py sdc_init
npm install

Start new Django project

Before you begin, you’ll need to create a new Django project. If you’re new to Django, there are some initial setup steps to follow. Specifically, you’ll need to auto-generate some code that establishes a Django project – a set of configurations for a Django instance, including database settings, Django-specific options, and application-specific configurations.

To get started, open your command line and navigate to the directory where you want to store your code. Then, execute the following command:

$ cd your_chosen_directory
$ django-admin startproject mysite

For more detailed instructions, you can refer to the Django documentation

This command will create a new project directory. We will continue using the mysite example in the following steps. Naturally, i n your case, you will need to customize the project name as per your requirements.

└─ your_chosen_directory/
   └─ mysite/
      ├─ manage.py
      └─ mysite/
         ├─ __init__.py
         ├─ settings.py
         ├─ urls.py
         ├─ asgi.py
         └─ wsgi.py

Setup SDC in project

To include SDC in your project you’ll need to install SDC and add sdc_core to the to the INSTALLED_APPS section in django’s settings.py.

...

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'sdc_core',
]

...

./mysite/mysite/settings.py

Finally, from the command line, cd into the project directory mysite and run the following command:

$ cd .mysite
$ python ./manage.py sdc_init

This process renames settings.py to base_settings.py and creates a new settings.py file. The new settings.py imports base_settings.py and extends it with additional configuration. Specifically, it:

  • Adds four new Django modules to INSTALLED_APPS

  • Ensures the template settings are correctly configured

  • Adjusts the static files directory settings

  • Sets key properties for SDC:

    • SERVER_CALL_VIA_WEB_SOCKET = False

    • MODEL_FORM_TEMPLATE = “elements/form.html”

    • LOGIN_CONTROLLER = “sdc-login”

    • LOGIN_SUCCESS = “/”

Additionally, it includes the following folders and files:

└─ your_chosen_directory/
   └─ mysite/
      ├─ template/
         ├─ elements
            ├─ form.html
            └─ inline_form.html
         ├─ base.html
         └─ index.html
      ├─ Assets/
         └─ ...
      ├─ manage.py
      └─ mysite/
         ├─ routing.py
         ├─ base_settings.py
         └─ ...

The changes include all server-side modifications. All changes in the Asserts folder have been skipped here for the moment. In the following the client side modifications are presented.

The SDC client

The whole client is organized in the Assets directory

└─ ...
   ├─ Assets/
      ├─ src/
         ├─ sdc_tools/
            └─ ...
         ├─ sdc_user/
            └─ ...
         ├─ index.organizer.js
         └─ index.style.scss
      ├─ webpack.config/
         ├─ webpack.development.config.js
         ├─ webpack.production.config.js
         └─ webpack.default.config.js
      ├─ babel.config.json
      └─ gulpfile.js
   ├─ package.json
   └─ ...

Let’s first look at the dependencies in the package.json file. The following list presents all the development dependencies.

  • @babel/core = ^7.26.10

  • @babel/preset-env = ^7.26.9

  • @babel/preset-react = ^7.26.3

  • @babel/register = ^7.25.9

  • babel-jest = ^29.7.0

  • babel-loader = ^10.0.0

  • css-loader = ^7.1.2

  • dotenv = ^16.4.7

  • glob-parent = ^6.0.2

  • glob-watcher = ^6.0.0

  • gulp = ^5.0.0

  • gulp-clean = ^0.4.0

  • gulp-copy = ^5.0.0

  • gulp-exec = ^5.0.0

  • gulp-rename = ^2.0.0

  • gulp-sass = ^6.0.1

  • gulp-uglify = ^3.0.2

  • jest = ^29.7.0

  • jest-environment-jsdom = ^29.7.0

  • js-cookie = ^3.0.5

  • micromatch = ^4.0.8

  • sass = ^1.85.1

  • sass-loader = ^16.0.5

  • style-loader = ^4.0.0

  • terser-webpack-plugin = ^5.3.14

  • webpack = ^5.98.0

  • webpack-stream = ^7.0.0

All development dependencies are necessary for the build process. The remaining dependencies need to be installed for the error-free application of SDC

  • @popperjs/core = ^2.11.8

  • bootstrap = ^5.3.3

  • esm = ^3.2.25

  • jquery = ^3.7.0

  • lodash = ^4.17.21

  • sdc_client = ^0.58.6

Please run the following to initialize the client.

$ npm install

And you are done!!