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:
Links
Summary
In this article, we have seen how to start a SolidJS project using the recommend code generator.
Top comments (2)
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!
Thanks for pointing out!