Installation · System Designer

Installation of the Progressive Web App

For the web app version optimized for desktop browsers:

go to https://designfirst.io/designer/
If your browser is compatible, you will see a dialog to install the application locally.

For the web app version optimized for mobile browsers:

go to https://designfirst.io/design/
If your browser is compatible, you will see a dialog to install the application locally.

The PWA version works offline (i.e. without an internet connection).

Installation from a Store

Installation via the Mac App Store.
Installation via the App Store.

Installation in your existing web application

Install System Designer from npm:

npm i system-designer

Then copy and paste the content of the /node_modules/system-designer/dist repository in your web project and go to the index.html page.

Because System Designer is a full client full web application, it requires no backend to work. It means that you can install System Designer in your PHP, J2E, ASP.net, ... applications.

Build the PWA version from the source code

Clone the GitHub repository:

git clone https://github.com/design-first/system-designer.git

Once you have cloned the repository, install the dependencies:

npm i

Then build and start System Designer:

npm run build
npm run start

Once server started, go to http://localhost:8080/.

Build the desktop versions from the source code

To build System Designer for Electron:

npm run electron

Copy the content of /dist directory into your System Designer for Electron project.

Then in your System Designer for Electron project:

# build for macOS
npm run macOS

# build for Windows
npm run windows

# build for Linux
npm run linux

Build the mobile versions from the source code

To build System Designer for Cordova:

npm run cordova

Copy the content of /dist directory into your System Designer for Cordova project.

Then in your System Designer for Cordova project:

# build for ios
npx cordova build ios

# build for android
npx cordova build android