DEV Community

Marcin Wosinek
Marcin Wosinek

Posted on • Originally published at how-to.dev

How to start a project with 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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

The generated application looks like this:
default-app.png

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;
Enter fullscreen mode Exit fullscreen mode

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

hello-world.png

Links

Summary

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

Discussion (2)

Collapse
lexlohr profile image
Alex Lohr

You have a small error in your Markdown: the image link for the example has a superfluous square closing bracket.

Otherwise, thanks for the article!

Collapse
marcinwosinek profile image
Marcin Wosinek Author

Thanks for pointing out!