Developing Guide
Environment setup
Environment setup.
- Read the guide in Getting Started to understand the basic concepts and the deco admin tool.
- Important, you can access our Discord to ask questions or report issues with deco.cx. Join our community too!
Summary
- Technology stack
- Start developing
- Developing with deco
Technology stack
When creating a website or online store with deco.cx, users have the flexibility to create Sections and Loaders that meet their unique needs. To help you easily and quickly create these components, we rely on a set of powerful and efficient technologies. Our technology stack is focused on simplicity and performance, making it accessible to developers with previous experience in HTML, CSS, JavaScript, and React. These are the main tools we use to power deco.cx sites:Preact
Preact is a fast and lightweight alternative to React.js, used for rendering UI components on the server and client. It uses JSX to create web components and is generally straightforward to learn.Tailwind
Tailwind is a CSS styling solution based on utility classes, making it ideal for beginners. Tailwind is also optimized for performance.Deno
Deno is a JavaScript and TypeScript runtime environment. It is used to build deco sites written in TypeScript and executed by a server. Deno is similar to Node.js (fun fact: they were created by the same person).Fresh
Fresh is a full-stack web framework for JavaScript and TypeScript developers. It is designed to make it easy to create high-quality, high-performance, and highly customizable web applications.Start developing
Required Tools
The only setup required to code deco.cx sites is to install Deno on your machine. To install Deno, follow the instructions on the deno.land page.
Make sure to keep Deno up-to-date! If you already have Deno installed, run
deno upgrade to update it.
We highly recommend using
Visual Studio Code as the IDE and
Git as the version control tool.
1. Create a Deco Site
Follow the steps in the Creating a Site tutorial.2. Clone Your Site Repository
Accept the invitation to join the repository created for your site. This invitation is sent to the email address associated with your GitHub profile. If you haven’t used a GitHub account to log into the admin panel or haven’t received an invitation, you can add a GitHub account as a collaborator to the site in the Settings tab.
Use the git clone command to download the site code to your machine. We
recommend using SSH. Open the terminal and execute the following command:
site-name with the name of your site.
Alternatively, you can clone the repository using other methods, such as git
https, the GitHub tool, or an IDE. The repository page on GitHub provides
details about different ways to clone.
3. Run Local Server
To run your site locally, edit, and see the changes in the Admin, you need to have a local environment (an environment withlocalhost as the host). To do
this, you can use the default localhost environment or create a new one.
3.1 Create new environment
Open the Releases tab in the Admin and click on the New environment button.
3.2 Set a name and a host to your environment
Choose a name for your environment and set your host as localhost.
3.3 Run your site locally
Copy the command shown after you create your environment and paste it into your terminal in the site folder.
Wait for the project to initialize. On the first run, Deno will download and
cache the project dependencies, and Deco will prepare the site details.
The site will be accessible at
https://{environment-name}--{site-name}.deco.site.
If the code of any section used on the site’s homepage is modified, it will be
reflected at the above address.
3.4 Publishing Changes
Considering that you chose the Deco Hosting to deploy your site, the development deployment process is very simple: do a git push of the changes to the main branch. Alternativaly, publish your local environment in the Admin by clicking on the Publish now button in your environment page.