Installation & Setup

Here we'll provide quick guides on how to setup and install your Solid app. We'll also touch on setting up things like environment variables, Typescript, and linters.

Installation

Solid has some vite templates to get you started. To make use of them just run these commands:

Javascript

bash
> npx degit solidjs/templates/js my-app
> cd my-app
> npm install # yarn or pnpm install
# To run the server
> npm run dev

bash
> npx degit solidjs/templates/js my-app
> cd my-app
> npm install # yarn or pnpm install
# To run the server
> npm run dev

Typescript

bash
> npx degit solidjs/templates/ts my-app
> cd my-app
> npm install # yarn or pnpm install
# To run the server
> npm run dev

bash
> npx degit solidjs/templates/ts my-app
> cd my-app
> npm install # yarn or pnpm install
# To run the server
> npm run dev

Typescript with TailwindCSS, WindiCSS, SASS or UNOCSS

In the command below you can replace tailwindcss with windicss, sass or unocss to get a template that already has one of these configured.

bash
> npx degit solidjs/templates/ts-tailwindcss my-app
> cd my-app
> npm install # yarn or pnpm install
# To run the server
> npm run dev

bash
> npx degit solidjs/templates/ts-tailwindcss my-app
> cd my-app
> npm install # yarn or pnpm install
# To run the server
> npm run dev

For more templates visit our vite templates GitHub repository

Setup Typescript In Pre-existing Solid Javascript Projects

Here, we'll walk you through how you can get Typescript installed and setup in your already existing Solid Javascript project.

Step 1: Install typescript in our project

bash
> npm install --save-dev typescript

bash
> npm install --save-dev typescript

Step 2: Initialize Typescript with A tsconfig.json File.

You can create a tsconfig.json file or you can run the below command to have one generated for you automatically

bash
> tsc --init

bash
> tsc --init

Step 3: Edit the tsconfig.json File To Match Solid's Configuration.

Copy the code below into your tsconfig.json as this is what it should look like.

json
{
  "compilerOptions": {
    "strict": true,
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "jsx": "preserve",
    "jsxImportSource": "solid-js",
    "types": ["vite/client"],
    "noEmit": true,
    "isolatedModules": true
  }
}

json
{
  "compilerOptions": {
    "strict": true,
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "jsx": "preserve",
    "jsxImportSource": "solid-js",
    "types": ["vite/client"],
    "noEmit": true,
    "isolatedModules": true
  }
}

If you used tsc --init, your tsconfig.json should have a lot of boilerplate, so you can get rid of that and just copy the above snippet.

Final step: Create a Typescript or .tsx file to test if everything works as it should.

Note: If you wish to change the index.jsx file to index.tsx there 2 things that you will need to do first. You'll need to make sure that you've changed the src attribute for the script tag in the index.html file.

diff
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
    <title>Solid App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
+   <script src="/src/index.tsx" type="module"></script>
  </body>
</html>

diff
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
    <title>Solid App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
+   <script src="/src/index.tsx" type="module"></script>
  </body>
</html>

tsx
// Mytscomponent.tsx
import { Component } from "solid-js";
function MyTsComponent(): Component {
  return (
    <div>
      <h1> This is a typescript component </h1>
    </div>
  );
}
export default MyTsComponent;

tsx
// Mytscomponent.tsx
import { Component } from "solid-js";
function MyTsComponent(): Component {
  return (
    <div>
      <h1> This is a typescript component </h1>
    </div>
  );
}
export default MyTsComponent;

Let's make use of our Typescript component in our Javascript component

jsx
// MyJsComponent.jsx
import MyTsComponent from "./MyTsComponent";
function MyJsComponent() {
  return (
    <>
      ...
      <MyTsComponent />
    </>
  );
}

jsx
// MyJsComponent.jsx
import MyTsComponent from "./MyTsComponent";
function MyJsComponent() {
  return (
    <>
      ...
      <MyTsComponent />
    </>
  );
}

For more information on Solid with typescript check out our Typescript section

Setting Up Environment Variables

Solid makes use of Vite so making use of environment variables here will be quite different from making use of environment variables in other frameworks that make use of other built tools.

Step 1: Let's create a .env file and declare a value in it called VITE_VARIABLE_NAME

VITE_VARIABLE_NAME="I am a vite environment variable"

VITE_VARIABLE_NAME="I am a vite environment variable"

Step 2: Make use of the environment variable in your Solid app.

Let's try and make use of the environment variable we just created in one of our Solid components

jsx
function MyComponent() {
  return (
    <div>
      <h2>Component with environment variable used {import.meta.env.VITE_VARIABLE_NAME}</h2>
    </div>
  )
}
export default MyComponent;

jsx
function MyComponent() {
  return (
    <div>
      <h2>Component with environment variable used {import.meta.env.VITE_VARIABLE_NAME}</h2>
    </div>
  )
}
export default MyComponent;

And that's it, just 2 steps and you're ready to go with your .env variables.

Notice how we made use of the environment variable in our Solid component, instead of using process.env that a lot of developers are familiar with, we're making use of

jsx
import.meta.env

jsx
import.meta.env

which is specific to Vite.

Note: The VITE prefix is client side specific so any backend specific environment variables do not need to make use of that prefix as they are not bundled by VITE for use on the client side.

For more information on environment variables in Vite and how to make use of intellisense on your environment variables in Typescript, check out the Vite Documentation

PreviousWelcome

NextLinting