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.
+
+ Edit src/App.tsx and save to reload.
+