This content originally appeared on DEV Community and was authored by Marcin Wosinek
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:
![hello-world.png]](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fhu828e0nilt88hhc5q0.png)
Links
Summary
In this article, we have seen how to start a SolidJS project using the recommend code generator.
This content originally appeared on DEV Community and was authored by Marcin Wosinek
Marcin Wosinek | Sciencx (2021-08-26T18:27:06+00:00) How to start a project with SolidJS. Retrieved from https://www.scien.cx/2021/08/26/how-to-start-a-project-with-solidjs/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.