Skip to main content

Setup Your Project

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 (not command.exe) terminal. This ensures that all the command line steps follow the same syntax.

Then, make sure you have followed the instructions on the 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:

node --version
npm --version
npx --version

Generate a New Project​

Start a new project named planets-app using the strudel-kit code:

npx degit strudel-science/strudel-kit planets-app

Note that this may prompt you to install degit from npm. Make sure you click select "yes" to install it.

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 page to get a breakdown of all the generated files.

Run Your Project​

Go into the new directory:

cd planets-app

Install the app dependencies:

npm install

Start up your app locally:

npm start

Open your app in the browser at http://localhost:5175

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.

Open Your Application Code​

For the rest of the tutorial you will need a code editor to make changes to the files in your app. We recommend VSCode but any editor will do.

From your code editor, open the planets-app folder.