How to Deploy SolidJS
Tags: solid, jamstack, netlify, hosting
Published: 2022-06-10 14:08:30

---
title: How to Deploy SolidJS
published: true
description: Whether you are starting from scratch or switching from another platform, we have you covered when deploying SolidJS to Netlify.
tags: solid, jamstack, netlify, hosting
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ifgf585uzoqpn96r7i86.png
canonical_url: https://www.netlify.com/blog/how-to-deploy-solidjs/
---
## Deploy SolidJS on Netlify

In this guide, we will show you how to deploy a [SolidJS](https://www.solidjs.com/) application on Netlify. Whether you are starting from scratch or switching from another platform, we have you covered when deploying Solid. There is a great [step-by-step guide to deploying on Netlify](https://www.netlify.com/blog/2016/09/29/a-step-by-step-guide-deploying-on-netlify/) for general use, but this guide is specifically to show you how to deploy Solid applications.

## What is SolidJS

SolidJS is a reactive JavaScript library that uses declarative JSX code to create performant user interfaces. Solid follows many of the same philosophies React does and has an API similar to React Hooks. Rather than using a Virtual DOM as React does, Solid compiles its components into actual DOM nodes that update in a more performant manner with more precision. 

## Deploy Solid Applications to Netlify

Netlify is a web developer platform that is known for making the web better by increasing productivity and deploying the fastest applications [using the Jamstack architecture](https://www.netlify.com/jamstack/). If you are not already a Netlify user, go ahead and [sign up for free](https://app.netlify.com/signup) first.

Otherwise, feel free to go directly to whichever section is most relevant to you:

- [Drag and Drop deploy](#drag-and-drop-deploy) - no git repository needed
- [Netlify CLI deploy](#netlify-cli-deploy)
- [Manual Deploy from Git](#deploy-a-solid-site-from-git)

### Getting Started with Solid

The quickest way to get started with a Solid app, is to use the base template. Type one of the following into a terminal.

**JavaScript Template**

```bash
npx degit solidjs/templates/js my-app
cd my-app
npm i # or yarn or pnpm
npm run dev # or yarn or pnpm
```

**TypeScript Template**

```bash
npx degit solidjs/templates/ts my-app
cd my-app
npm i # or yarn or pnpm
npm run dev # or yarn or pnpm
```

### Drag and Drop deploy with Netlify

With the new [Drop deploy](https://app.netlify.com/drop), you don’t even need a git repository to deploy your site. Within the terminal from the location you created your app, run the build command for the Solid app.

```bash
npm run build # or yarn or pnpm
```

The `dist` folder is then created within the root of your project. Navigate to the folder that holds your new `dist` folder in your Finder on Mac or File Explorer on Windows devices and also go to your [Netlify team page](https://app.netlify.com/) and login. Once you are logged in, you can drag your `dist` folder right onto the page and Netlify will generate a url and quickly deploy your Solid site.

### Netlify CLI deploy

The [Netlify CLI](https://docs.netlify.com/cli/get-started/) is a way to configure, build, test, and deploy your sites all without leaving the command line. First, you need to have the Netlify CLI installed on your local machine. Run the following command to install it globally.

```bash
npm install netlify-cli -g
```

Once installed, many commands can be ran with either the `netlify {command}` or `ntl {command}` for short. First, you will want to run the `netlify login` command to authenticate your Netlify account to the CLI. This will open a browser window, asking you to log in with Netlify and grant access to Netlify CLI. You can then use the netlify init command to either connect a site without a git repository or connect your local repository for continuous deployment on Netlify. This will lead you through a few steps to get your site connected and deployed. 

1. If you don’t have your app connected to git, the Netlify CLI will ask if you want to deploy it manually or connect to a repo. Deploying manually will add more steps, to avoid this you can add your site to a git provider before running netlify init.
    ![create without git repository or connect to GitHub](https://res.cloudinary.com/netlify/image/upload/v1654772694/blog/github.png)

2. Once connected to git, either connect to an existing Netlify site, or create and configure a new site.
    
    ![create and configure a new site](https://res.cloudinary.com/netlify/image/upload/v1654771257/blog/connect.png)
    
3. Choose the team you would like to add the site to. 
    
    ![Choose the team you would like to add the site to](https://res.cloudinary.com/netlify/image/upload/v1654771257/blog/team.png)
    
4. Name your site or leave it blank for a random name. Once this is done, your site is created and your links are available, but the site is not yet deployed.
    
    ![Name your site or leave it blank for a random name.](https://res.cloudinary.com/netlify/image/upload/v1654773660/blog/name.png)
    
5. Netlify will attempt to detect the build command and directory of the output for the app, but it can be customized in the next steps.
    
    ![Netlify will attempt to detect the build command and directory of the output for the app](https://res.cloudinary.com/netlify/image/upload/v1654773736/blog/build.png)
    
6. Specify your functions directory if you are using Netlify serverless functions and create a netlify.toml configuration file if you don’t already have one.
    
    ![Specify your functions directory if you are using Netlify serverless functions and create a netlify.toml configuration file if you don’t already have one.](https://res.cloudinary.com/netlify/image/upload/v1654771257/blog/functions.png)
    
7. And success, your site is configured!
    
    ![your site is configured](https://res.cloudinary.com/netlify/image/upload/v1654771257/blog/success.png)

   
8. To deploy your site, run `netlify deploy` in the terminal. Or head to the app.netlify.com dashboard to deploy manually. 

Once configured, any new push to your git repository, `git push`, will trigger a new site build or by running `netlify-deploy --prod`. Running `netlify open` will open the Netlify admin URL for your new [Solid site](https://deploy-solid-with-netlify-cli.netlify.app/)!

![Netlify Dashboard of the new deployed site](https://res.cloudinary.com/netlify/image/upload/v1654773938/blog/solid-dash.png)

### Deploy a Solid Site from Git

You can also manually deploy a Solid app on [Netlify](https://app.netlify.com/start). Once you have a git repository pushed, navigate to the **Sites** page in your Netlify dashboard and click the button “Add new site”. 

![Sites page in the nav bar of Netlify's dashboard](https://res.cloudinary.com/netlify/image/upload/v1654771257/blog/sites.png)

A dropdown menu will appear that asks if you want to import an existing project, start from a template, or deploy manually. To get a site from git, you should choose the **Import an existing project** option.

![dropdown menu to import an existing project on Netlify dashboard](https://res.cloudinary.com/netlify/image/upload/v1654771257/blog/import.png)

That will bring you to a screen to connect your Git provider. 

![connect your git provider](https://res.cloudinary.com/netlify/image/upload/v1654771257/blog/git.png)

Search the provider where the git repository for your app is located, then Netlify will authenticate and pop up a search for your available repos. 

![Search for the git repository](https://res.cloudinary.com/netlify/image/upload/v1654774095/blog/search-git.png)

Once you choose the correct repository, Netlify will auto detect the framework and populate the build command and publish directory. If there is a custom build, you can edit the settings on this screen.

![auto detect build settings](https://res.cloudinary.com/netlify/image/upload/v1654774162/blog/auto-detect-build.png)

Click the **Deploy site** button and Netlify will begin deploying your application. Now your [SolidJS app](https://deploy-solid-on.netlify.app/) is live!

![Solid app](https://res.cloudinary.com/netlify/image/upload/v1654774258/blog/solid-site.png)

That’s it, three different ways to deploy your SolidJS site to Netlify. Remember, if your experience is different from anything written here or something didn’t work as expected, please [let us know about it here](https://answers.netlify.com) and we will help you or answer any questions you have.