diff --git a/docs/generated/manifests/menus.json b/docs/generated/manifests/menus.json index f28f676a03..450b790d83 100644 --- a/docs/generated/manifests/menus.json +++ b/docs/generated/manifests/menus.json @@ -3583,6 +3583,14 @@ "children": [], "disableCollapsible": false }, + { + "name": "Add a Solid Project", + "path": "/showcase/example-repos/add-solid", + "id": "add-solid", + "isExternal": false, + "children": [], + "disableCollapsible": false + }, { "name": "Add a Qwik Project", "path": "/showcase/example-repos/add-qwik", @@ -3691,6 +3699,14 @@ "children": [], "disableCollapsible": false }, + { + "name": "Add a Solid Project", + "path": "/showcase/example-repos/add-solid", + "id": "add-solid", + "isExternal": false, + "children": [], + "disableCollapsible": false + }, { "name": "Add a Qwik Project", "path": "/showcase/example-repos/add-qwik", @@ -3790,6 +3806,14 @@ "children": [], "disableCollapsible": false }, + { + "name": "Add a Solid Project", + "path": "/showcase/example-repos/add-solid", + "id": "add-solid", + "isExternal": false, + "children": [], + "disableCollapsible": false + }, { "name": "Add a Qwik Project", "path": "/showcase/example-repos/add-qwik", diff --git a/docs/generated/manifests/nx.json b/docs/generated/manifests/nx.json index 24b8185496..605a919fac 100644 --- a/docs/generated/manifests/nx.json +++ b/docs/generated/manifests/nx.json @@ -4467,6 +4467,16 @@ "path": "/showcase/example-repos/add-lit", "tags": [] }, + { + "id": "add-solid", + "name": "Add a Solid Project", + "description": "Add a Solid project to your repo", + "file": "shared/recipes/add-stack/add-solid", + "itemList": [], + "isExternal": false, + "path": "/showcase/example-repos/add-solid", + "tags": [] + }, { "id": "add-qwik", "name": "Add a Qwik Project", @@ -4603,6 +4613,16 @@ "path": "/showcase/example-repos/add-lit", "tags": [] }, + { + "id": "add-solid", + "name": "Add a Solid Project", + "description": "Add a Solid project to your repo", + "file": "shared/recipes/add-stack/add-solid", + "itemList": [], + "isExternal": false, + "path": "/showcase/example-repos/add-solid", + "tags": [] + }, { "id": "add-qwik", "name": "Add a Qwik Project", @@ -4728,6 +4748,16 @@ "path": "/showcase/example-repos/add-lit", "tags": [] }, + "/showcase/example-repos/add-solid": { + "id": "add-solid", + "name": "Add a Solid Project", + "description": "Add a Solid project to your repo", + "file": "shared/recipes/add-stack/add-solid", + "itemList": [], + "isExternal": false, + "path": "/showcase/example-repos/add-solid", + "tags": [] + }, "/showcase/example-repos/add-qwik": { "id": "add-qwik", "name": "Add a Qwik Project", diff --git a/docs/map.json b/docs/map.json index 8c352da107..08fc5440c5 100644 --- a/docs/map.json +++ b/docs/map.json @@ -1028,6 +1028,12 @@ "description": "Add a Lit project to your repo", "file": "shared/recipes/add-stack/add-lit" }, + { + "name": "Add a Solid Project", + "id": "add-solid", + "description": "Add a Solid project to your repo", + "file": "shared/recipes/add-stack/add-solid" + }, { "name": "Add a Qwik Project", "id": "add-qwik", diff --git a/docs/shared/recipes/add-stack/add-solid.md b/docs/shared/recipes/add-stack/add-solid.md new file mode 100644 index 0000000000..798ce9f50f --- /dev/null +++ b/docs/shared/recipes/add-stack/add-solid.md @@ -0,0 +1,310 @@ +# 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 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/) diff --git a/docs/shared/reference/sitemap.md b/docs/shared/reference/sitemap.md index cecb9978c9..fd74ce7db2 100644 --- a/docs/shared/reference/sitemap.md +++ b/docs/shared/reference/sitemap.md @@ -176,6 +176,7 @@ - [Showcase](/showcase) - [Example Repos](/showcase/example-repos) - [Add a Lit Project](/showcase/example-repos/add-lit) + - [Add a Solid Project](/showcase/example-repos/add-solid) - [Add a Qwik Project](/showcase/example-repos/add-qwik) - [Powering Up React Development With Nx](/showcase/example-repos/react-nx) - [Using Apollo GraphQL](/showcase/example-repos/apollo-react)