@kernelminds/create-enclave 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,6 @@
1
+ {
2
+ "editor.formatOnSave": true,
3
+ "editor.codeActionsOnSave": {
4
+ "source.fixAll": "always"
5
+ }
6
+ }
package/README.md ADDED
@@ -0,0 +1,202 @@
1
+ <p align="center"> <a href="https://scailo.com" target="_blank"> <img src="https://pub-fbb2435be97c492d8ece0578844483ea.r2.dev/scailo-logo.png" alt="Scailo Logo" width="200"> </a> </p>
2
+
3
+ <h1 align="center">Scailo Apps Starter Kit</h1>
4
+
5
+ <p align="center">
6
+ <a href="https://www.npmjs.com/package/@kernelminds/create-enclave">
7
+ <img src="https://img.shields.io/npm/v/%40kernelminds/create-enclave.svg" alt="NPM Version">
8
+ </a>
9
+ </p>
10
+
11
+ # Scailo Application Starter Kit
12
+
13
+ #### Welcome to the official starter kit for building custom applications and widgets on the Scailo platform. This kit provides a complete project scaffold using TypeScript and TailwindCSS (with DaisyUI), allowing you to get up and running in minutes.
14
+
15
+ ## Features
16
+
17
+ - TypeScript: Write robust, type-safe code for your application logic.
18
+
19
+ - TailwindCSS: A utility-first CSS framework for rapid UI development.
20
+
21
+ - DaisyUI: A component library for TailwindCSS to build beautiful interfaces quickly.
22
+
23
+ - Development Server: A built-in proxy server to seamlessly connect with the Scailo API during local development.
24
+
25
+ - Build & Packaging Scripts: Simple commands to watch for changes, build your assets, and package your application for deployment.
26
+
27
+
28
+ ## Getting Started
29
+
30
+ Follow these steps to create your new Scailo application.
31
+
32
+ ### Prerequisites
33
+
34
+ Make sure you have `nodejs` and `npm` installed on your system.
35
+
36
+ ### Scaffolding a New Application
37
+
38
+ To create a new project, run the following command in your terminal:
39
+
40
+ ```bash
41
+ npx @kernelminds/create-enclave@latest
42
+ ```
43
+
44
+ You will be prompted to enter the following information:
45
+
46
+ 1. **Application Name**: The user-facing name of your application as it will appear on Scailo.
47
+
48
+ ```bash
49
+ ? Enter Application Name: My Awesome Scailo App
50
+ ```
51
+
52
+ 2. **Application Identifier**: A unique internal identifier for your application. This is used by Scailo to track the app.
53
+
54
+ **Important**: Please use a unique identifier. Deploying a new app with an existing identifier will overwrite the current application on Scailo.
55
+
56
+ ```bash
57
+ ? Enter Application Identifier: my-awesome-scailo-app-123
58
+ ```
59
+
60
+ 3. **Initial Version**: The starting version number for your application. It must be a semantic versioning compliant string (e.g., 1.0.0).
61
+
62
+ ```bash
63
+ ? Enter Initial Version: 1.0.0
64
+ ```
65
+
66
+ Once completed, a new directory with your application name will be created. Navigate into it to begin development.
67
+
68
+ ```bash
69
+ cd "My Awesome Scailo App"
70
+ npm install
71
+ ```
72
+
73
+ ## Development Workflow
74
+
75
+ #### 1. Configure the Development Server
76
+
77
+ The starter kit includes a local proxy server to forward API requests to your Scailo instance during development.
78
+
79
+ 1. Locate the `.env` file in the root of your project.
80
+
81
+ 2. Update the file with your Scailo credentials and local server configuration:
82
+
83
+ ```bash
84
+ # The full URL of the Scailo API
85
+ upstreamAPI=https://your-scailo-instance.scailo.com/api
86
+
87
+ # The port for your local development server
88
+ port=8080
89
+
90
+ # Your Scailo username for proxying requests
91
+ username=your_username
92
+
93
+ # Your Scailo password for proxying requests
94
+ password=your_password
95
+ ```
96
+
97
+ #### 2. Run the Development Server
98
+
99
+ ```bash
100
+ npm run dev:serve
101
+ ```
102
+
103
+ This command will:
104
+
105
+ - Read the configuration from your .env file.
106
+
107
+ - Start a local server on the specified port.
108
+
109
+ - Serve the main index.html file on the / route (e.g., http://localhost:8080).
110
+
111
+ - Proxy any other incoming requests to the upstreamAPI using your credentials.
112
+
113
+ #### 3. Watch and build TypeScript and CSS files
114
+
115
+ ```bash
116
+ npm run dev:watch
117
+ ```
118
+
119
+ This command executes `npm run css:watch` and `npm run ui:watch` `concurrently`.
120
+
121
+ #### 4. Develop Your Application
122
+
123
+ With the server running, you can now start building your application. You will likely need two additional terminal windows for the watch commands.
124
+
125
+ ##### Styling (CSS)
126
+
127
+ - To add custom styles or configure TailwindCSS, edit the resources/src/css/app.css file.
128
+
129
+ - To automatically compile your CSS changes, run the watcher:
130
+
131
+ ```bash
132
+ npm run css:watch
133
+ ```
134
+
135
+ - This will generate the output file resources/dist/css/bundle.css, which is already linked in index.html.
136
+
137
+ ##### Application Logic (TypeScript)
138
+
139
+ - The main entry point for your UI logic is resources/src/ts/app.ts.
140
+
141
+ - You can create additional TypeScript modules and import them into app.ts.
142
+
143
+ - To automatically compile your TypeScript code into a single JavaScript bundle, run the watcher:
144
+
145
+ ```bash
146
+ npm run ui:watch
147
+ ```
148
+
149
+ - This generates the minified output file resources/dist/js/bundle.src.min.js, which is already linked in index.html.
150
+
151
+ ### Customizing the Application Logo
152
+
153
+ To set a custom logo for your application:
154
+
155
+ - Place your logo image file inside the `resources/dist/img/` folder.
156
+
157
+ - Open the `MANIFEST.yaml` file in the project root.
158
+
159
+ - Update the `resources.logos` property to point to your new logo file name.
160
+
161
+ ```yaml
162
+ resources:
163
+ logos:
164
+ # Example for a logo named 'my-logo.png'
165
+ - "resources/dist/img/my-logo.png"
166
+ ```
167
+
168
+ ### Authentication and Authorization
169
+
170
+ It is crucial to understand how authentication works in development versus production.
171
+
172
+ - **During Development**: The username and password in your .env file are used by the local proxy server (server.ts) to make authenticated API calls to Scailo. This is for convenience and local testing only.
173
+
174
+ - **In Production (on Scailo)**: When your application is built and deployed to the Scailo platform, it does not use the .env credentials. Instead, the application automatically assumes the roles, permissions, and identity of the currently logged-in Scailo user who is executing the app.
175
+
176
+ ### Packaging for Deployment
177
+
178
+ When your application is ready for deployment, you need to create a final build package.
179
+
180
+ 1. Run the packaging command:
181
+
182
+ ```bash
183
+ npm run package
184
+ ```
185
+
186
+ 2. You will be prompted to enter a new version for the application.
187
+
188
+ **Note**: The new version must be a valid semantic version and must be greater than the current version specified in the `app_version` property of your `MANIFEST.yaml` file.
189
+
190
+ This script will bundle all your assets and create the final distributable package required for deployment on Scailo.
191
+
192
+ ## NPM Scripts Summary
193
+
194
+ Here is a quick reference for the available commands:
195
+
196
+ | Command | Description |
197
+ | ----------------- | --------------------------------------------------------------------------- |
198
+ | npm run dev:serve | Starts the local development server and API proxy. |
199
+ | npm run dev:watch | Watches for changes in CSS files and TypeScript files concurrently. |
200
+ | npm run css:watch | Watches for changes in CSS files and rebuilds the bundle.css on save. |
201
+ | npm run ui:watch | Watches for changes in TypeScript files and rebuilds the JS bundle on save. |
202
+ | npm run package | Bundles and packages the application for production deployment. |