Skip to main content

Divio ❤️ Svelte

Getting started with Svelte

Svelte is a tool for building web applications. Like other user interface frameworks, it allows you to build your app declaratively out of components that combine markup, styles and behaviours. You can read more about Svelte from the official website.

This quickstart guide is designed to be straightforward and easy to follow. It will guide you through the process of setting up a Svelte application on the Divio Cloud Platform. We'll provide the necessary tools, walk you through the application setup, and explain how to deploy it. While we won't delve into in-depth Svelte development concepts, our focus is to get your Svelte app up and running on our platform.

To work with Svelte and deploy it to the Divio Cloud Platform, you need the following tools:

Git
Install the git version control system to manage your code.
Download Git
Docker
Install Docker, a platform to develop, ship, and run applications.
Download Docker
Divio CLI
Install the command-line tool to interact with the Divio Cloud Platform.
Install Divio CLI

Setting up the app

Setting up a Svelte app

Setting up a Svelte app on the Divio Cloud Platform is a breeze. Regardless of the language, any web application can run on our platform, provided it can be Dockerised. We've made it even easier with our ready-to-go quickstart templates for most languages & frameworks. If you prefer, you can also migrate an existing application or start from scratch and integrate the Divio Cloud Platform later.

Start by creating a free account on the Divio Cloud Platform and choose from any of the following options depending on your requirements:

We will guide you through setting up a new application using our ready-to-go Svelte template. The template pre-configures the necessary services and settings so you can get started quickly on the Divio Cloud Platform without fuss.

1

Head over to the Divio Control Panel and choose to create a new application from the left toolbar. Next, select I want to start from scratch and click on the Svelte box from the list of available templates. Hit Next to continue.

2

Choose where to store your code: Divio's Git server (default) or an external Git provider. Migrating to an external Git server later is also possible. Refer to our guide on importing a repository from Git for details.

  • Divio: we provide a Git server to you through git@git.divio.com:myapp.git.
  • External: use your own Git server or a third-party provider like Github, Gitlab, or Bitbucket.

The default branch that we and most Git providers use is main. You may change the branch name if you have a different setup.

Once you've made your choice, click Next to proceed.

3

Proceed by giving your application a unique Name and Slug. We will start with a Free Trial plan for this guide, but you can always upgrade to a paid plan later. Before moving on, there are some options you need to consider:

  • Cloudspace: The region you choose depends on your subscription plan. You can always change this later. Updating the cloud space will require a migration that causes downtime.
  • Resources: The free trial does not allow you to modify resources. Paid subscriptions allow you to modify memory, instances, storage, backups, the number of domains, and more.
  • Features: Not all features are available to all plans. Compare our plans to see what is available depending on your choice.

Add a Payment method and your Billing information to proceed. Rest assured, we need this information to verify your identity and prevent fraud. You will not be charged during the trial period, ensuring your peace of mind.

Click Create application to finish the setup process.

4

Our platform will now take a few moments to provision the application. This means our system is making a copy of the files for your application by adding commits to the repository. It's a simple and quick process.

Deploy your app

Deploy your Svelte app

Your application has two independent server environments, Test and Live. These have their own backups, environment variables, services, and more. They can be deployed independently and configured to track different Git branches. Depending on the subscription plan you choose, you can also add more environments.

Application Dashboard
1

Once your application has been provisioned, press the Deploy button on the Test environment to start the deployment process.

This process builds the Docker image from the Dockerfile, and then launches a Docker container from the image. The container environment will include automatically configured environment variables for connections to services such as a database or media storage.

Typically, this takes a couple of minutes, depending on the complexity of your application.

2

After you have successfully deployed the Test environment, the Control Panel will indicate this in the interface with a Last deployment succeeded at ... message. The application URL in the test environment pane will display as a link, for example, https://myapp-stage.us.aldryn.io. Click the link to access the application.

Deployment Failures

The deployment process can fail for various reasons. If you encounter any issues, check the Last deployment failed status message on the environment card or consult the application Logs for further debugging information.

We also provide a debugging checklist that may help you further.

Any time new changes are committed to the repository, the Divio Control Panel will indicate this with a message showing the number of undeployed commits for each server environment.

If a deployment fails for whatever reason, there will be no downtime. The currently running containers will continue running, and the failing changes will not be deployed.

Deployed and undeployed commits

The application dashboard provides you with access to valuable controls and information. They are self-explanatory, and you don't need to interact with any of them at this stage, but it's worth familiarising yourself with what's available.

Setup your app locally

Setup your Svelte app locally

1

You should have Git and Docker installed and configured on your local machine. We also strongly recommend installing the Divio CLI to interact with the Divio Cloud Platform from the command line. Alternatively, we will provide instructions on how to use Docker Compose to run your application locally instead.

2

From within your application's dashboard, select the Setup tab and copy the provided command. It should look something like this:

divio app setup myapp -s test

Copy the command into your terminal and run it. The Divio CLI will execute several steps to build your application locally. Depending on how much needs to be downloaded and processed, this may take a few minutes.

In addition to cloning the repository and building the application, the setup command will add a .divio directory containing some Divio-related configuration that connects it to the Divio Control Panel.

Navigate into the newly created application directory to find your application code. For example: cd myapp.

Start the application by running the following command in your terminal:

divio app start

test setup command

3

The previous step will start the development server defined within your docker-compose.yml file. To view your application, open your web browser and navigate to http://127.0.0.1:8000.

Press CONTROL-C to stop the local development server or run docker compose down.

What if I already have it set up locally?

If you already have a repository or have provided some files and connected to the Divio Cloud Platform through these instructions, you can skip the setup process and start the application locally by running divio app start or docker compose up.

Helpful commands

The Divio CLI offers several commands to interact with your application. These commands, combined with Docker and Docker Compose, provide powerful tools to manage your application. Here are a few of the most useful commands:

divio app start           # start the application locally
divio app stop # stop the application locally
divio app logs # show the logs of the application
divio app open # open the application in the browser
divio app setup {app} # setup the application locally
divio app deploy {env} # deploy the application to an environment
# and many more, see https://github.com/divio/divio-cli for a full list

See our local commands cheat sheet for many more useful commands.

Dive Deeper

After setting up and deploying your Svelte application on the Divio Cloud Platform, you can explore various features and tools that Divio offers. These tools can help you enhance your application's performance, manage your applications more efficiently, and integrate additional services seamlessly.

Basic features

Advanced features

Once you're comfortable with the basics, you can explore more advanced features and tools to enhance your application even further:

  • CI/CD: Implement continuous integration and continuous deployment pipelines. Automate your build, test, and deployment processes to ensure consistent and reliable application updates.

Enable beta features

We frequently introduce new functionalities and improvements. By opting into beta features in your account settings, you can gain early access to these innovations and provide feedback to help shape the future of the platform.

You can enable beta features from within your account settings.

Next steps

Svelte

From this point, you can continue with the Svelte Introduction to learn more about Svelte.