How to Deploy SolidJS

#solid #jamstack #netlify #hosting

Deploy SolidJS on Netlify

In this guide, we will show you how to deploy a SolidJS 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 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. If you are not already a Netlify user, go ahead and sign up for free first.

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

Drag and Drop deploy - no git repository needed
Netlify CLI deploy
Manual Deploy 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

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

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, 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.

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 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 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.

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.

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.
Once connected to git, either connect to an existing Netlify site, or create and configure a new site.
Choose the team you would like to add the site to.
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.
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.
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.
And success, your site is configured!
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!

Deploy a Solid Site from Git

You can also manually deploy a Solid app on Netlify. Once you have a git repository pushed, navigate to the Sites page in your Netlify dashboard and click the button “Add new site”.

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.

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

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.

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.

Click the Deploy site button and Netlify will begin deploying your application. Now your SolidJS app is live!

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 and we will help you or answer any questions you have.