please checkout requirements docs for detailed setup instructions.
Are you ready to build your first Electrode App?
Please make sure to have all the environment requirements ready & setup before proceeding to the next step.
$ npm install -g yo gulp generator-electrode ** NOTE: You may need sudo depending on your machine permissions. **
Make a new directory for your awesome app, then generate your new project:
$ mkdir your-awesome-app $ cd your-awesome-app $ yo electrode
Fill out the Electrode App generator with your information:
Run one simple command to start the server. Presto!
$ gulp dev
Now open localhost:3000 in your browser to access the app. Hello Electrode!
Let's take a quick high level overview of our file structure and what
generator-electrode gives you out the box. Read through our What's Inside section for a more detailed description.
Contains your client side code and our favs, React, Redux + CSS modules.
The entry point for the client. It contains powerful Electrode modules that we will leverage as we build out functionality.
The shared routes between client and server are defined here for use with react-router.
This is the folder for your React components. We love React and how it helps us to manage User Interface complexity. Read more in the Explore section.
This is the folder for your CSS files. We will use CSS Modules: a CSS file in which all class names and animation names are scoped locally by default.
Your environment specific configuration files go here and are managed by the versatile electrode-confippet module, including a preset config that you can customize and extend.
Contains your server-side code. Electrode-Server gives you a powerful plugin capable of SSR out the box. Learn more in the What's Inside section.
Where we extend our app babel configuration to allow us to use the presets and any additional babel settings.
A file that tell git what files (or patterns) to ignore when you commit.
A webpack loader, plugin and library to make NodeJS
require work with complex files like images when we are doing server-side rendering.
A file where you can customize any process in the Travis default build environment.
A file that stores all your Gulp configurations. We will explore this more in Getting Started: Intermediate.
Contains the metadata for
your-awesome-app and a list of your dependencies to install when running
Info you want users to know about your app (installation instructions, licensing, contributors, etc.).
Let's continue to build by modifying our component and deploying in Quick Start: Build Component.