This article assumes you have completed the Quick Start guide and have a working Webiny project.
In this article we'll learn what is necessary to create a new app from scratch. We'll start with a very simple React app, just to cover the boilerplate that is needed for the app to work.
apps folder, create a new folder, for example
my-app, and create the following structure:
index.html file looks like any other React app HTML:
The contents of
src/index.tsx is the simplest React app ever! We don't need anything fancy for this article so let's just mount a simple
Let's setup some basic ENV variables that will be loaded when we start the app:
You're most likely used to using the dot-env library to load your ENV variables. For default Webiny setup, we like to use the env-cmd library as it supports JSON and we can define multiple sets of variables in one file.
You're free to replace this with
dotenv if you prefer to use that. For Webiny, it's only important that the required variables are set, no matter how you do it.
Since we're using Typescript, we need to have a
tsconfig.json in our app, and this is what it looks like:
We're extending the
tsconfig.json file from the root of the project. This way, all our apps will use the same Typescript configuration and it's easy to tweak your TS configuration for the entire project.
Now let's take a look at the
It looks very similar to a
create-react-app setup, except, instead of
react-scripts we're using
webiny CLI. And
webiny command works with
webiny.config.js which we'll cover next.
If you haven't read it already, we recommend you to take a look at the article about Webiny configuration files first.
This file simply tells that, when you run the
start command, use the
startApp utility we provide to run the local development server. For now, this is all we need.
Starting local development
Now your app is ready! To start a local development build, run the following in your terminal:
If you're a Windows user, we recommend using Git Bash or WSL.
Once you've created this app, it will be picked up by
yarn next time you run
yarn in the project root. How so? If you look at you
<root>/package.json file, you'll see something like this:
This means that every package inside the
apps folder is a workspace, and whenever you run
yarn in your project, it will be linked via
node_modules and its dependencies will be installed automatically.
To lean more about Yarn workspaces, read this article.
In this article we learned how to setup the most basic app skeleton and run it using
webiny run command. At this point, you can either continue developing your app using plain components, as you would do in your regular React app, or you can go the Webiny way, and develop your app using an
We highly recommend taking the
App Template path! You'll be building your app using plugins, it will be easy to share your template via
npm, reuse it for different projects, etc. Learn more about this in the next article.