Using a Starter Kit on Starter.dev to Kickstart Your React and Angular Projects

As a developer, deciding on the stack to use and the dependencies can be a difficult choice. Once you start, configuration, installation, and making sure you have the correct versions are also chores.

Starting with a prebuilt framework for some of these tasks can boost a developer's productivity and save time by eliminating repetitions.

In this article, I will walk you through how you can cut 40 hours of setup and boost productivity by focusing on what really matters. We will learn a simple solution for implementing project functionality without worrying about setting up different versions of dependencies and configurations, or repeating the same process for different projects.

Introducing Starter Kits

starter.dev has a curated list of starter kits for various frameworks and libraries to help boost developer productivity.

Why starter kits? Our architects discovered they were repeatedly going through the same process every time they needed to start a new project. This process included initializing, installing dependencies, setting up tests, and everything else that comes with bootstrapping a new project.

How to use a Starter Kit

Let’s walk through starting apps with Angular, and React with starter kits using the Starter Kits Showcases.

Every starter kit is structured with the basic requirements to initialize the projects with key features:

• Routing
• Forms
• State Management
• API interactions - REST & GraphQL
• Authentication
• Test Runners

These features help developers understand how to architect and build large scale applications.

The default project directories are scaffolded with added directories, configurations, and a demo app to help quickly build or modify the components.

Using the Angular Apollo TailwindCSS Starter Kit

Every starter kit is easy to initialize so you can start building features for your project.

The Angular starter kit sets you up with these tools to quickly get you started:

• Angular 13: for build frontend components
• Apollo Client: for managing both local and remote data with GraphQL
• TailwindCSS: for styling components and elements
• Storybook: Component library
• Jest: Test runner

Initializing the project:

To initialize a project with the starter kits, run the following:

1. Run npx @this-dot/create-starter to run the scaffolding tool
2. Select Angular, Apollo, and TailwindCSS kits from the CLI library options
3. Name your project
4. cd into your project directory, install dependencies using the tool of your choice, and voila! You can start building features in your new project immediately.

Configurations

The project pre-configuration is the recommended Angular GraphQL configuration. The ApolloModule and ApolloClientOptions are imported for the App NgModule.

// GraphQL Module

import { NgModule } from '@angular/core';
import { ApolloModule, APOLLO_OPTIONS } from 'apollo-angular';
import { ApolloClientOptions, InMemoryCache } from '@apollo/client/core';
import { HttpLink } from 'apollo-angular/http';

const uri = 'https://api.starter.dev/graphql'; // <-- add the URL of the GraphQL server here
export function createApollo(httpLink: HttpLink): ApolloClientOptions<any> {
    return {
        link: httpLink.create({ uri }),
        cache: new InMemoryCache(),
    };
}

@NgModule({
    exports: [ApolloModule],
    providers: [
        {
            provide: APOLLO_OPTIONS,
            useFactory: createApollo,
            deps: [HttpLink],
        },
    ],
})
export class GraphQLModule {}

// App Module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { FetchExampleComponent } from './fetch-example/fetch-example.component';
import { CounterExampleComponent } from './counter-example/counter-example.component';
import { GraphQLModule } from './graphql.module';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
    declarations: [
        AppComponent,
        FetchExampleComponent,
        CounterExampleComponent,
    ],
    imports: [BrowserModule, GraphQLModule, HttpClientModule, AppRoutingModule],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

Project Implementation.

Starter kits aim to make your project set up fast, easy and reusable. The initial demo project is a counter example connected to a GraphQL module with a fetch example and routes implemented - all following industry’s best practices.

Go ahead to add more components or modify existing components without the need to make any changes to the configuration.

Extras

The preconfigured Storybook for component management gives developers the opportunity to create organized UI systems making both the building process and documentation more efficient and easier to use.

React RxJs and Styled Components

The React starter kit tools scaffold to quickly get you started with a React project, and include:

• React 17: for building frontend components
• RxJs: for managing data
• Styled Components: for styling components and elements
• React Router: For matching project routes
• Storybook: Component library
• Jest: Test runner

Initializing the project:

To initialize a project with the starter kits, run the following:

• Run npx @this-dot/create-starter to run the scaffolding tool
• Select Create React App, RxJS and Styled Components kits from the CLI library options
• Name your project
• cd into your project directory, install dependencies using the tool of your choice, and voila! You can start building features in your new project immediately.

Configurations

The project configuration is the same with an initial create-react-app config boilerplate, but with pre-configurations for Storybook and style component.

Conclusion

In this article, you were able to boost productivity by cutting the time of setting up and moving straight to implementing components, allowing you to focus on working on what matters.

I hope this article was helpful, let us know what other starter kits you will love to see on starter.dev.