dcupl cli welcome screen

Gernot Bernkopf

on April 24th, 2023

Getting started - how to init a dcupl project with our CLI

Streamline the development process and overcome hurdles like unfinished or missing interfaces. The dcupl workflow simplifies your daily business. Start quickly and efficiently.

What you will learn

This article summarizes the most important information for you so that you can start a dcupl project and discover the functionality of our Command Line Interface. By following the step-by-step guide, you will end up with a local dcupl workspace connected to your dcupl project in the Console and ready to start developing your web app.

Basically, this post is a summary of content that you will also find in the dcupl docs. The aim is to show you how to start developing with dcupl in a few simple steps - in this post especially how to use the dcupl CLI. So let's get started …

New Version v1.0.0 released!!

Install the current version of the dcupl CLI and then open the instructions, which give you an overview of the CLI's functionality. For the installation and use of dcupl you need current versions of Node and npm or comparable package managers. Open the command line and execute the following commands:

npm i -g @dcupl/cli
dcupl --help

The output should look like the following:

dcupl-demos $dcupl --help
dcupl <command>
  dcupl welcome         You are awesome!               [aliases: hey, rocks, 🚀]
  dcupl init            Init a local project based on one of our starters
  dcupl serve [path]    Starts your local dev server
  dcupl files:push      Upload files to the dcupl cloud
  dcupl files:pull      Download files from the dcupl cloud
  dcupl files:copy      Download files from the dcupl cloud
  dcupl files:list      Lists all the uploaded versions
  dcupl generate [type] Generate models, typescript types, json schema, ...
                        from your models
  --help     Show help                                                 [boolean]
  --version  Show version number                                       [boolean]
dcupl-demos $

dcupl rocks 🚀

dcupl rocks/hey/welcome shows our nice welcome screen, which sums up the most important information and leads you to the first step - dcupl init.

dcupl init

With dcupl init you can initialize a local dcupl workspace. For this quick introduction, choose the "Minimal Setup". It includes a concise dcupl project to help you get started with dcupl, containing a simple model and the corresponding data.

dcupl-demos $dcupl init
? What's your project name my-dcupl-app
? Do you want to start from scratch or a demo application? (Use arrow keys)
❯ Minimal Setup 
  Transfermarkt Example 

If you want to start right away with a project with a large data set with hundreds of thousands of data rows, we have developed a demo for you, which contains an extract of the European Transfermarkt (football transfer market) data. We used data provided by the platform kaggle.com, for which we would like to thank them and the project owner at this point. At the end of the article you will find the URL to the relevant kaggle project. We update the data set from time to time.

NOTICE: The Transfermarkt demo can be joined in the dcupl Console. Just register at https://console.dcupl.com and select one out of five dcupl demo projects to join. Of course, you can also join all five projects. In addition an Angular based dcupl catalogue demo can be downloaded on Github.

If you have chosen the "Minimal Setup" your output should look like this:

dcupl-demos $dcupl init
? What's your project name my-dcupl-app
? Do you want to start from scratch or a demo application? Minimal Setup
##                         ##
##  dcupl project created  ##
##                         ##
Next steps: 
1) Setup
   cd my-dcupl-app
   npm install
2) Connect your local project with the dcupl console
   - Go to https://console.dcupl.com and create your free account
   - Set your projectId in the dcupl.config.json
   - Set your apiKey in the dcupl.secrets.json
   - Push your local workspace to the console using the CLI dcupl files:push --name my-first-push
3) Start your server & check your data in the Data Explorer Tab
   npm run serve
dcupl-demos $

As a next step navigate to the new directory “my-dcupl-app” and open your project in an editor like Visual Studio Code. Watch the following video to get to know how to connect your local dev project to your dcupl Console project.

dcupl serve [--port port-number]

Jump into your newly created local dcupl workspace and type dcupl serve. Your local development server is started with the default port 8083. Now you can open http://localhost:8083 in your browser.

It is possible to select a port other than 8083 for your local server with the parameter port and the respective port number.

dcupl serve . --port 3000

If you have followed all the steps above, including those described in the tutorial video, you can now really get started and add static or dynamic resources to your project or define them accordingly in the dcupl Loader configuration and display and check them in the dcupl Console. Don't forget, the local server must be started and selected as “source” in the console.

dcupl Console - select source

If you have any questions use our community repository or the chat on our website to ask them. We will take care of it as soon as possible.

See the more detailed descriptions in our docs:

The following steps are not relevant for the basic setup, but will make your daily work in the development process easier. Especially dcupl files:push will be important for your smooth development experience.

dcupl files

The commands below based on dcupl files only work if you have previously linked your project to a dcupl Console project. That means you have to register at https://console.dcupl.com, create a project and follow the step-by-step instructions in the “Getting Started” widget - or watch the video above, which covers exactly these steps.

With these commands you can upload your local data resources, model descriptions and dcupl Loader configurations to the dcupl CDN or download them from it and perform other actions.

dcupl files:push [--name version-name]

Upload your local workspace folder to your connected Console project. Use --name to set a version name.

dcupl files:pull [--name version-name]

Download your Console project folder to your local workspace on your machine. Use --name to set the name of the version you want to download.

dcupl files:copy [--from version-name] [--to version-name]

Copy one version of your dcupl Console project to another one. Use this command to save a backup or roll out a specific version.

dcupl files:versions

Outputs a list of all versions of a project in the dcupl CDN.

dcupl generate

Generate new models, Typescript types or an export of all models of your project as a JSON file. The generated file is based on the JSON Schema standard and can be imported into other services like https://app.quicktype.io/, with which you can generate classes and types for different other programming languages like Java, Kotlin, C# or Javascript.

dcupl/dcupl-demos $dcupl generate
? What do you want to generate? (Use arrow keys)
❯ Model 
  Typescript Types 
  JSON Schema                   

If you choose Model and set the name for the model (in the example "NewModel"), a model is created in the models folder and is added to the Loader configuration.

dcupl-demos/fashion-products $dcupl generate
? What do you want to generate? Model
{ type: 'model' }
? What's your model name? (User, Person, Product, etc.) NewModel
Model written to ../dcupl/dcupl-demos/fashion-products/dcupl/models/newmodel.dcupl.json
Resource added to dcupl/dcupl.lc.json
dcupl-demos/fashion-products $

Enjoy the dev experience using the dcupl CLI 😎

Further resources

If you have any questions do not hesitate to use one of our channels to ask for support.

Ready to get started?

We look forward to working with you and your team, no matter if you are a SME or a global enterprise. dcupl helps enterprises to develop efficiently by minimizing risks effortlessly.