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.tsximport { Component } from "solid-js";function MyTsComponent(): Component {return (<div><h1> This is a typescript component </h1></div>);}export default MyTsComponent;
tsx
// Mytscomponent.tsximport { 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.jsximport MyTsComponent from "./MyTsComponent";function MyJsComponent() {return (<>...<MyTsComponent /></>);}
jsx
// MyJsComponent.jsximport 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 build 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