# How to start a project with SolidJS

In this article, I'll show how to start a new project with [Solid](https://www.solidjs.com/).

# Code generator
The easiest way to start development with Solid is on the project page in [Get Started](https://www.solidjs.com/guide):
```shell
$ 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](https://vitejs.dev/) configuration - so we can save all the troubles needed to set up the bundling infrastructure.

# Instalation 
First, we need to install all the dependencies:
```shell
$ 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:
```shell
$ 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:
![default-app.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1630001531978/z4_pL5XyV.png)

# Hello world
To simplify the example, we can replace `src/App.jsx`:
```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://cdn.hashnode.com/res/hashnode/image/upload/v1630001806795/mYOsV4Qbd.png)

# Links
* [repository](https://github.com/marcin-wosinek/solidjs-hello-world)
* [working page](https://marcin-wosinek.github.io/solidjs-hello-world/)
* [free course pre-registration](https://www.subscribepage.com/freesolidjscourse)

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