Overview

In the previous section, we shared a little bit about what Greenwood is and the high level goals of this guide. Now we are ready to help you start your first project!

In this section, we will kick off our Greenwood project by:

1. Initializing our project for development with npm
2. Installing Greenwood and setting up some npm scripts for local development
3. Setting up the needed project structure and layout

This guide assumes you are starting from an empty directory (git init being the exception). We recommend going through this guide once to understand the basics and from there, you can explore our documentation to learn more about all of Greenwood's capabilities.

Installing Greenwood

With Greenwood installed, you will be able to use its CLI to power the development of your project though automated scripts and configuration.

First thing we need to do is generate a package.json file so we can install Greenwood. The easiest way to do that is by running npm init from the root directory of where you want to start your project:

# hit enter to accept all defaults, or provide your own values
$ npm init

Now we can install Greenwood

$ npm install @greenwood/cli --save-dev

All set!

Configuring Workflows

With Greenwood installed, let's create a couple of npm scripts so that we can automate our development workflows with easy to remember commands.

In package.json, edit the scripts and type sections accordingly by adding:

{
  "type": "module",
  "scripts": {
    "...": "....",

    "build": "greenwood build",
    "start": "greenwood develop"
  }
},

Now, you'll be able to do two things:

1. npm start - Start a local development server with file watching and live reloading.
2. npm run build - Generate a static build of the project that you can upload to a web server.

You can go ahead and try out both of these tasks now, and you should see Greenwood's default generated output, letting you know you've set everything up correctly.

You can rename build and start to whatever you like, but this is what will be used for the sake of this guide.

Project Structure

OK, almost there! Let's quickly review what a basic project structure will look like. At this point, your project should look something like this:

.
├── node_modules/
├── package-lock.json
└── package.json

As we get ready to move onto the next section, your project will need a "workspace", which is basically just the name of the directory where your project files will go. For now, let's just use Greenwood's default, which is src/. After creating that directory, this is what your project structure should look like:

.
├── node_modules/
├── package-lock.json
├── package.json
└── src/

At this point, if you are in git repository, it might be a good time to create a .gitignore file and add the following directories: .greenwood/, node_modules/ and public/.

Ok, now what we have our project ready, there's just one last thing to review before we jump right in, but we promise it will be quick. Please head on over to the next section in our guide to learn about Greenwood's key concepts.