How to start a project with SolidJS

#javascript #solidjs

In this article, I'll show how to start a new project with Solid.

Code generator

The easiest way to start development with Solid is on the project page in Get Started:

$ npx degit solidjs/templates/js solidjs-hello-world
npx: installed 1 in 0.874s
> cloned solidjs/templates#HEAD to solidjs-hello-world

It's coming with working vitejs configuration - so we can save all the troubles needed to set up the bundling infrastructure.

Instalation

First, we need to install all the dependencies:

$ npm install

> esbuild@0.12.23 postinstall /home/marcin/workspace/github/solidjs-hello-world/node_modules/esbuild
> node install.js

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.2 (node_modules/vite/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN vite-template-solid@0.0.0 No repository field.

added 75 packages from 74 contributors and audited 76 packages in 6.435s

6 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Dev server

We can start the server with:

$ npm run start
  vite v2.5.1 dev server running at:

  > Local: http://localhost:3001/
  > Network: use `--host` to expose

  ready in 353ms.

The generated application looks like this:

Hello world

To simplify the example, we can replace src/App.jsx:

import styles from "./App.module.css";

function App() {
  return (
    <div class={styles.App}>
      <header class={styles.header}>
        <p>Hello World!</p>
      </header>
    </div>
  );
}

export default App;