You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: packages/react-components/.storybook/preview.ts
+2Lines changed: 2 additions & 0 deletions
Original file line number
Diff line number
Diff line change
@@ -7,6 +7,8 @@ const preview: Preview = {
7
7
order: [
8
8
'Getting Started',
9
9
['Introduction','Installation','Quickstart','Template Structure','Usage with AI','External Resources'],
10
+
'Tutorials',
11
+
['Get Started With Strudel',['Introductions','Setup','Configure Taskflow','Customize Taskflow','Customize App','Customize Home Page','Continue Learning']],
import { Meta } from"@storybook/addon-docs/blocks";
2
+
3
+
<Metatitle="Tutorials/Get Started With Strudel/Introductions" />
4
+
5
+
# Tutorial Introduction
6
+
7
+
In this tutorial you will learn the basics of how to build a web application using the STRUDEL Task Flow templates. By the end you will have your own customized version of the [Explore Data Task Flow](https://strudel.science/design-system/task-flows/explore-data/) running in a web browser on your computer.
8
+
9
+
### Who is this tutorial for?
10
+
11
+
This tutorial is for anyone who wants to build a web user interface for their scientific software by starting with a STRUDEL Task Flow. It will deal with tools such as the command line, JavaScript, TypeScript, React, HTML, and CSS. Some experience with these tools will be important to follow along with the tutorial.
12
+
13
+
### Have feedback?
14
+
15
+
If you encounter any issues along the way or have feedback about how we can improve this tutorial, we would love to hear from you. Check out the tutorial's [feedback thread](https://github.com/orgs/strudel-science/discussions/50) on our GitHub Discussions page.
16
+
17
+
### Jump In
18
+
19
+
1.[Set Up Your Development Environment](/strudel-kit/docs/guides/tutorials/basic-app-with-strudel/setup)
20
+
21
+
Install all the prerequisite and core software that powers the STRUDEL Kit.
22
+
23
+
2.[Create a Base App with STRUDEL](/strudel-kit/docs/guides/tutorials/basic-app-with-strudel/create-app)
24
+
25
+
Get familiar with the STRUDEL CLI and generate the base scaffolding for a React app that uses the STRUDEL Design System.
26
+
27
+
3.[Add a Task Flow to Your App](/strudel-kit/docs/guides/tutorials/basic-app-with-strudel/add-taskflow)
28
+
29
+
Learn how to add Task Flows into your app and build your own custom configurations.
30
+
31
+
4.[Customize Your Task Flow](/strudel-kit/docs/guides/tutorials/basic-app-with-strudel/customize-taskflow)
32
+
33
+
Familiarize yourself with the Task Flow code and learn how to make changes that are important to your use case.
34
+
35
+
5.[Customize Your App](/strudel-kit/docs/guides/tutorials/basic-app-with-strudel/customize-app)
36
+
37
+
Make the app your own by changing the theme, adding styles, and adding custom sections.
38
+
39
+
6.[Customize the Home Page](/strudel-kit/docs/guides/tutorials/basic-app-with-strudel/customize-home-page)
import { Meta } from"@storybook/addon-docs/blocks";
2
+
3
+
<Metatitle="Tutorials/Get Started With STRUDEL/Setup" />
4
+
5
+
# Setup Your Project
6
+
7
+
The first step is to start a terminal program. The rest of this tutorial will assume you are using a standard MacOS, UNIX, or [Windows PowerShell](https://learn.microsoft.com/en-us/powershell/scripting/install/installing-powershell-on-windows?view=powershell-7.4) (not command.exe) terminal. This ensures that all the command line steps follow the same syntax.
8
+
9
+
Then, make sure you have followed the instructions on the [Installation](/strudel-kit/docs/getting-started/installation) page so that you have node, npm, and npx installed on your system. You can confirm you have these tools using the commands below:
10
+
11
+
```
12
+
node --version
13
+
npm --version
14
+
npx --version
15
+
```
16
+
17
+
## Generate a New Project
18
+
19
+
Start a new project named `planets-app` using the strudel-kit code:
20
+
21
+
```
22
+
npx degit strudel-science/strudel-kit planets-app
23
+
```
24
+
25
+
Note that this may prompt you to install degit from npm. Make sure you click select "yes" to install it.
26
+
27
+
Once installed, this will generate a new folder called `planets-app` with the strudel-kit base app and Task Flow templates embedded in it. See the [Project Structure](/strudel-kit/docs/getting-started/project-structure) page to get a breakdown of all the generated files.
28
+
29
+
## Run Your Project
30
+
31
+
Go into the new directory:
32
+
33
+
```bash
34
+
cd planets-app
35
+
```
36
+
37
+
Install the app dependencies:
38
+
39
+
```bash
40
+
npm install
41
+
```
42
+
43
+
Start up your app locally:
44
+
45
+
```bash
46
+
npm start
47
+
```
48
+
49
+
Open your app in the browser at http://localhost:5175
50
+
51
+
In the future, when you run your app, you will not need to perform the install step -- just `npm start`. In fact, the development server that this runs is able to update the app "live" as you change the code in this directory, so you don't need to stop and restart the app for each change.
52
+
53
+
## Open Your Application Code
54
+
55
+
For the rest of the tutorial you will need a code editor to make changes to the files in your app. We recommend [VSCode](https://code.visualstudio.com/) but any editor will do.
56
+
57
+
From your code editor, open the `planets-app` folder.
0 commit comments