# Add a New Solid Project The code for this example is available on GitHub: {% github-repository url="https://github.com/nrwl/nx-recipes/tree/main/solidjs" /%} **Supported Features** Because we are not using an Nx plugin for Solid, there are a few items we'll have to configure manually. We'll have to configure our own build system. There are no pre-created Solid-specific code generators. And we'll have to take care of updating any framework dependencies as needed. {% pill url="/core-features/run-tasks" %}✅ Run Tasks{% /pill %} {% pill url="/core-features/cache-task-results" %}✅ Cache Task Results{% /pill %} {% pill url="/core-features/remote-cache" %}✅ Share Your Cache{% /pill %} {% pill url="/core-features/explore-graph" %}✅ Explore the Graph{% /pill %} {% pill url="/core-features/distribute-task-execution" %}✅ Distribute Task Execution{% /pill %} {% pill url="/core-features/integrate-with-editors" %}✅ Integrate with Editors{% /pill %} {% pill url="/core-features/automate-updating-dependencies" %}✅ Automate Updating Nx{% /pill %} {% pill url="/core-features/enforce-module-boundaries" %}✅ Enforce Module Boundaries{% /pill %} {% pill url="/core-features/plugin-features/use-task-executors" %}🚫 Use Task Executors{% /pill %} {% pill url="/core-features/plugin-features/use-code-generators" %}🚫 Use Code Generators{% /pill %} {% pill url="/core-features/automate-updating-dependencies" %}🚫 Automate Updating Framework Dependencies{% /pill %} ## Install Solid and Other Dependencies {% tabs %} {% tab label="npm" %} ```shell npm i solid-js npm i --save-dev @nx/web solid-devtools vite-plugin-solid ``` {% /tab %} {% tab label="yarn" %} ```shell yarn add solid-js yarn add --dev @nx/web solid-devtools vite-plugin-solid ``` {% /tab %} {% tab label="pnpm" %} ```shell pnpm i solid-js pnpm i --save-dev @nx/web solid-devtools vite-plugin-solid ``` {% /tab %} {% /tabs %} ## Create an Application We'll start with a web application and then tweak the settings to match what we need. Add a new web application to your workspace with the following command: ```shell nx g @nx/web:app my-solid-app --bundler=vite ``` The `@nx/web:app` generator will create some files that are unnecessary for our Solid application. The files to be deleted are: - `apps/my-solid-app/src/public` - `apps/my-solid-app/src/app` - `apps/my-solid-app/main.ts` - `apps/my-solid-app/styles.css` - `apps/my-solid-app/.babelrc` ### Turn the Application into a Solid Application Now we'll create the files that are necessary to turn our application into a Solid application. **Add the following files** ```tsx {% fileName="apps/my-solid-app/src/App.tsx" %} import type { Component } from 'solid-js'; const App: Component = () => { return (

Edit src/App.tsx and save to reload.

Learn Solid Now
); }; export default App; ``` ```tsx {% fileName="apps/my-solid-app/src/index.tsx" %} /* @refresh reload */ import { render } from 'solid-js/web'; import App from './App'; const root = document.getElementById('root'); if (import.meta.env.DEV && !(root instanceof HTMLElement)) { throw new Error( 'Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?' ); } render(() => , root!); ``` **Update the following files** ```html {% fileName="apps/my-solid-app/index.html" %} Solid App
``` ```ts {% fileName="apps/my-solid-app/vite.config.ts" %} /// import { defineConfig } from 'vite'; import solidPlugin from 'vite-plugin-solid'; // import devtools from 'solid-devtools/vite'; import viteTsConfigPaths from 'vite-tsconfig-paths'; export default defineConfig({ cacheDir: '../../node_modules/.vite/my-solid-app', server: { port: 3000, }, build: { target: 'esnext', }, plugins: [ viteTsConfigPaths({ root: '../../', }), /* Uncomment the following line to enable solid-devtools. For more info see https://github.com/thetarnav/solid-devtools/tree/main/packages/extension#readme */ // devtools(), solidPlugin(), ], // Uncomment this if you are using workers. // worker: { // plugins: [ // viteTsConfigPaths({ // root: '../../', // }), // ], // }, test: { globals: true, cache: { dir: '../../node_modules/.vitest', }, environment: 'jsdom', include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'], }, }); ``` ```json {% fileName="apps/my-solid-app/tsconfig.json" %} { "extends": "../../tsconfig.base.json", "files": [], "compilerOptions": { "target": "ESNext", "useDefineForClassFields": true, "module": "ESNext", "lib": ["ESNext", "DOM"], "moduleResolution": "Node", "jsx": "preserve", "jsxImportSource": "solid-js", "strict": true, "resolveJsonModule": true, "isolatedModules": true, "esModuleInterop": true, "noEmit": true, "noUnusedLocals": true, "noUnusedParameters": true, "noImplicitReturns": true, "skipLibCheck": true, "types": ["vite/client", "vitest"] }, "include": ["src"], "references": [ { "path": "./tsconfig.app.json" }, { "path": "./tsconfig.spec.json" } ] } ``` You can now run `nx serve my-solid-app` and your Solid application can be viewed in your browser! ## Create a Library Let's create a library that our Solid application is going to consume. To create a new library, install the `@nx/js` package and run: ```shell nx g @nx/js:lib my-lib ``` Once the library is created, update the following files. Rename `libs/my-lib/src/lib/my-lib.ts` -> `libs/my-lib/src/lib/my-lib.tsx`, then edit the contents to: ```tsx {% fileName="libs/my-lib/src/lib/my-lib.tsx" %} export function MyLibComponent(props: { name: string }) { return

Hello {props.name} from MyLib

; } ``` ```json {% fileName="libs/my-lib/tsconfig.json" %} { "extends": "../../tsconfig.base.json", "compilerOptions": { "module": "commonjs", "forceConsistentCasingInFileNames": true, "strict": true, "noImplicitOverride": true, "noPropertyAccessFromIndexSignature": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, "jsx": "preserve", "jsxImportSource": "solid-js", "types": ["vitest"] }, "files": [], "include": [], "references": [ { "path": "./tsconfig.lib.json" }, { "path": "./tsconfig.spec.json" } ] } ``` ```tsx {% fileName="apps/my-solid-app/src/App.tsx" %} import type { Component } from 'solid-js'; import { MyLibComponent } from '@acme/my-lib'; const App: Component = () => { return (

Edit src/App.tsx and save to reload.

Learn Solid Now
); }; export default App; ``` Now when you serve your application, you'll see the content from the library being displayed. ## More Documentation - [@nx/vite](/packages/vite) - [@nx/js](/packages/js) - [@nx/web](/packages/web) - [Solid](https://www.solidjs.com/)