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.

Top comments (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

Thanks for pointing out!

Find what you were looking for? Join hundreds of thousands of developers on DEV so you can:

🌚 Enable dark mode
🔠 Change your default font
📚 Adjust your experience level to see more relevant content