# Quickstart

## Creating your first application and module

### **1. Create your application**
1. Go to the applications page and press "Add"
1. Fill in the name of your application
1. Press the "Add modules" button to open all available modules
1. Add the following modules: `@hello_world/hello_world_theme` and `@hello_world/allow_all_login`
1. Set the version of the modules to the latest available
1. Set the theme module from the dropdown to `@hello_world/hello_world_theme` 
1. Set the authentication module from the dropdown to `@hello_world/allow_all_login`
1. Save the application

### **2. Connect your application to a free subdomain**
1. Go to the domains page and press "Add"
1. Here you can set any available subdomain of .stlse.app, for example "my_app.stlse.app"
1. (Optional) you can instead connect your own custom domain, but you have to first add a CNAME/ALIAS/ANAME dns record to point to: `app.cname.stlse.com`
1. Save the domain
1. The certificate should be automatically generated, if not you can press "Generate Certificate"
1. Go to the application page and edit your application
1. Press the "Add Domain" button
1. Select your domain and confirm
1. Save the application and visit your domain from a new window

### **3. Create a new module**
1. Go to the scopes page and create a new scope (e.g. `new_scope`)
1. Go to the modules page and press "Add" to create a new module
1. Fill the details of your new module and add a unique slug within the scope you are using (e.g. `new_module`)
1. Start a new Live Development session for the module
1. Go back to the application list (the live development session should be still open on the right sidebar)
1. Select your application and press "Modify"
1. Press "Add modules", search for your module and add it
1. Select the 'livedev' version of the module
1. Save the application
1. Go back to the application's domain and refresh, you should see now your new module below the "Hello"


---
---

## Modifying your module

### **4. Modifying the source code**

1. Go back to the live development editor (there should be a button on the right sidebar) 
1. Edit the code
1. Save with "ctrl+s" / "cmd+s"
1. Go back to your application and refresh the page
1. After you refresh the page you should see the changes appear in realtime

### **5. Saving your module**
1. In the top right corner there should be an icon to publish your code as an internal module. Click it
1. A screen should appear asking you to enter the new module version
1. Insert the version and press save (e.g 0.0.1)
1. After which you can close the editor or keep it running
1. Go back and edit your application by changing the version of your module from 'livedev' to the version you just published (e.g 0.0.1)
1. Save the changes
1. Go to the application domain and reload 
1. The application should still be running with the saved content, even if you close the editor.

### **6. Editing a saved version**
1. Go to the modules list and select a module to edit
1. Press "Modify"
1. In the "Internal Deployments" section you should see the "Edit" button (only for versions published from live develpoment editor) 
1. Press the "Edit" button and the code should be loaded in your browser
1. Go to the applications table and select your application
1. Press "Modify"
1. Add your module if not present
1. Change the version of your module to the 'livedev' version
1. Save
1. Now you can visit your domain and make changes in real-time from the live development editor

---
---

## Next Steps

As next steps you could try combining and experimenting with other marketplace modules,  
for example you could try to extend the SIXEMPRESS theme with your own custom module.

Follow the guide here: [How to create a new sidebar entry for the SIXEMPRESS theme](https://discuss.stlse.com/t/how-to-create-a-new-sidebar-entry-for-the-sixempress-theme/38)