---
type: lesson
authors:
  - anthony-campolo
cloudinary_convert: false
cover: https://media.codingcat.dev/image/upload/v1684519320/main-codingcatdev-photo/courses/solidjs-intro/fundamentals.png
published: published
section: Getting Started
title: Fundamentals
weight: 1
---

## Project Structure and Vite Configuration

Create a blank directory called `intro-to-solid` and initialize a `package.json` file with either `pnpm` or `npm`.

```bash
mkdir intro-to-solid
cd intro-to-solid
pnpm init
# npm i
```

Install the following project dependencies:

- `solid-js` - A reactive JavaScript UI library, updating directly on the DOM for high performance.
- `@solidjs/meta` - Tools for managing metadata within Solid applications, enhancing SEO.
- `@solidjs/router` - A router library for Solid, enabling single-page application creation.
- `vite` - A modern front-end build tool providing fast development experience via features like hot module replacement.
- `vite-plugin-solid` - A Vite plugin that adds Solid support, allowing Vite to compile Solid's syntax and reactivity system.

```bash
pnpm add -D solid-js @solidjs/meta @solidjs/router vite vite-plugin-solid
# npm i -D solid-js @solidjs/meta @solidjs/router vite vite-plugin-solid
```

Add `vite` scripts to `package.json` for `dev`, `build`, and `preview`.

- `dev` is set to `vite` which starts the Vite development server. It provides features like hot module replacement and fast refresh, allowing you to instantly see changes as you develop your application.
- `build` is set to `vite build` which instructs Vite to build your project for production. It optimizes and minifies your code, resulting in smaller bundle sizes that load faster for your users. It typically outputs the build assets into a `dist` folder in your project directory.
- `serve` is set to `vite preview` which allows you to preview your built application in a local server environment. It serves the files generated by `vite build` from a local server, enabling you to preview the production build of your application before deploying it.

Also make sure that `type` is set to `module` in `package.json`.

```json
{
	"name": "into-to-solid",
	"description": "An example SolidJS application using Solid Router and Vite",
	"type": "module",
	"keywords": ["SolidJS"],
	"author": "Anthony Campolo",
	"license": "MIT",
	"scripts": {
		"dev": "vite",
		"build": "vite build",
		"serve": "vite preview"
	},
	"devDependencies": {
		"@solidjs/meta": "^0.28.0",
		"@solidjs/router": "^0.4.3",
		"solid-js": "^1.5.5",
		"vite": "^3.1.3",
		"vite-plugin-solid": "^2.3.6"
	}
}
```

Create a `vite.config.js` file.

```bash
echo > vite.config.js
```

Vite works with multiple frameworks that use different syntaxes and file types like React, Vue, and Svelte. Vite will know what to expect and how to handle different frameworks through plugins in its configuration file.

```js
// vite.config.js

import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';

export default defineConfig({
	plugins: [solidPlugin()]
});
```

Here we have defined our Vite configuration with the Solid Plugin. It is imported as `solidPlugin` from `vite-plugin-solid` and added to the `plugins` array inside Vite's `defineConfig` helper.

### HTML Entry Point

Create an `index.html` file for our HTML entry point. This will be the page shell that our root DOM will render into.

```bash
echo > index.html
```

The root Solid component will be imported as an ESM module from `/src/root.jsx` and set to the `src` attribute on `script`.

```html
<!-- index.html -->

<!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" />
		<title>A First Look at Solid</title>
	</head>

	<body>
		<noscript>You need to enable JavaScript to run this app.</noscript>
		<div id="root"></div>
		<script src="/src/root.jsx" type="module"></script>
	</body>
</html>
```

### Render Function

In a SolidJS application, the root `render` function is responsible for mounting your application to a DOM element. Create a file called `root.jsx` in a directory called `src`.

```bash
mkdir src
echo > src/root.jsx
```

`render` is the root render function imported from `solid-js/web` and is analogous to `ReactDOM.render()` in a React application or `Vue.mount()` in a Vue application.

The root `render` function takes two arguments:

1. The component that you want to render
2. The DOM element you want to render it into

```jsx
// src/root.jsx

/* @refresh reload */
import { render } from 'solid-js/web';

function App() {
	return (
		<div>
			<header>
				<h1>A First Look at Solid</h1>
				<a href="<https://github.com/solidjs/solid>">Learn Solid</a>
			</header>
		</div>
	);
}

render(() => <App />, document.getElementById('root'));
```

Here, the `App` component is the top-level component for the application where your main application logic resides. `document.getElementById('root')` is the DOM node that the application will be mounted to.

This is typically a `div` with an `id` of `root` in your HTML. Once this code runs, SolidJS will create an instance of `App`, mount it to the specified DOM node, and keep it up-to-date with the state of your application.

### Start Development Server

Run `pnpm dev` or `npm run dev` to start the development server on localhost.

```bash
pnpm dev
# npm run dev
```

Open [localhost:5173](http://localhost:5173/) to view the running application in your browser. The page will reload if you make edits.

![Showing SolidJS running on localhost:5173](https://media.codingcat.dev/image/upload/v1684519512/main-codingcatdev-photo/courses/solidjs-intro/01-solid-home-page-on-localhost-5173.png)
