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;

The dev server updates automatically on the change, and we can see the following page:

Summary

In this article, we have seen how to start a SolidJS project using the recommend code generator.

How to start a project with SolidJS

Comments

SolidJS

How to start internationalization in SolidJS with rosetta

More from this blog

Changes in programming made possible with AI

Advantages of unit testing—with examples in Jasmine

Pure functions and basic tests in Jasmine

How to prepare for a job interview

How to build a demo project

Code generator

Instalation

Dev server

Hello world

Links

Summary

Command Palette

Comments

SolidJS

How to start internationalization in SolidJS with rosetta

More from this blog

Code generator

Instalation

Dev server

Hello world

Links

Summary