Create an Electrode App

Last updated 2 months ago

Requirements

Before proceeding, be sure to verify the Requirements for setting up your development environment.

Note: Make sure the directory you will work from does not contain any spaces in the path.

Bad: c:\work space\electrode Good: c:\work_space\electrode

Quick Guide

You can start your app using the Ignite Menu or using the Ignite Single task.

  • Ignite Menu

$ ignite

Choose the option for Generate an Electrode application.

  • Ignite Single task

$ ignite generate-app

Fill out the information for your app. You can press enter to select all the defaults, except for specifying a name for your app.

For example:

After the app is created and the npm install is completed, you can start the app in dev mode:

$ cd electrode-app
$ clap dev

When the app starts, you should see the status in your terminal:

Hello Electrode

Now open localhost:3000 in your browser to access the app Hello Electrode!

Hello Electrode

Go ahead and play around with the app. View the page source to see the Server Side Rendered HTML. Refresh the page to see the SSR content load immediately before React starts running.

Additional Commands

To view all the development tasks available enter the following: clap.

To start in hot mode, enter the following command:

$ clap hot

To build your app for a production deployment:

$ clap build

To start your app in production mode:

$ npm run prod

Project Structure

A basic top-level view of the application's structure is shown below.

electrode-app
├── package.json
├── LICENSE
├── README.md
├── config
├── src
│ ├── client
│ └── server
├── test
│ ├── client
│ └── server
└── xclap.js
  • config - Contains the configuration for your application.

  • src/client - Contains your React application.

  • src/server - Contains your NodeJS server application with SSR support.

  • test - Contains the unit test for your application.

  • xclap.js - Entry to the Electrode archetype tasks.

The generated application included a few demo components to show you how to use Redux, CSS Modules, and React JSX. Feel free to play with them and remove or replace them when you are ready to add your application.

To continue to build React components for your Electrode Application, see Developing Your Electrode App.