Here is an example application using the technologies and practices outlined in this article: react-portfolio-app

We’ll cover some core areas

• Environment setup
• Start
• Understanding the code
• Component libraries
• Hooks and the Component Lifecycle

Environment setup

Language | Typescript with React library

Compile & Deploy | Node

Package manager | Yarn (read understanding node, nvm, and npm)

Text Editor | VSCode

Debug on | Chrome

Simple as that, right? Not quite, we need to understand how all these tools and technologies work with each other to render a beautiful web page.

Language: Typescript with React library and Next.js framework

TypeScript (TS) casts a stricter enforcement of data types onto our code, which is used to structure the compiled version of JavaScript (JS) — enabling us to catch more bugs when building the code.

React offers us a structure to build in a component-based architecture so that we have reusable and shareable components. The library aids in creating defined avenues for routing, querying, rendering at varying times, extrapolating JS into a far more readable and concise language. We use TS and React to wrangle the JS beast.

Next.js is a framework we will use to handle configuring React to be more structured and seamless when building the app. It eases the challenges of implementing routing, data fetching, and caching for React apps and employs server-side rendering for most of the functionality, unless we specify to render from the client side.

Compile & Deploy: Node

Ah yes, my love, Node. Node is a beautiful framework that enables JS to be built in the backend and create a cohesive fullstack application within a single language. Everything can be compiled and deployed at once, making frontend and backend development far more seamless.

Head to nodejs.org to download the latest version of Node. After installation, confirm node is downloaded with:

node -v
npm -v

Package Manager: Yarn

A package manager helps us contain and organize our node project into smaller more succinct modules. The debate between NPM and Yarn is one that will outlast my career, but my two cents are that while both can do the same functionality, Yarn is faster (read more here).

Head to classic.yarnokg.com to install Yarn. You can use npm to install yarn (which was installed with Node) or an alternative like homebrew or a curl script. After installation, confirm yarn is downloaded with:

yarn -v

NVM (Optional)

You can use nvm to manage the node version for individual projects since some project dependencies may require a different version of Node.

Head to this guide to install NVM, if you run into any issues you can review the README for nvm to troubleshoot. After installation, confirm nvm is downloaded with:

nvm -v

I suggest setting the latest version of Node to the default with the below commands, then exit and open a new tab in terminal for the configuration to be set:

nvm alias default node
nvm use default

Text Editor: VSCode

This is the best editor! There, I said it! Come at me 👊 Here’s a helpful guide for setting up your editor

Obviously everyone has their preference, but I LOVE the visual aids it has for viewing your code in a tree structure (far more helpful than you’d expect), seeing the diffs on code changes, and if you’re lazy like me sometimes making your commits from the editor 😬

Here’s an example of one of VSCode’s awesome visuals — it’s highlighting the commit changes when I added Material UI NextJS integrations to the codebase:

Debug on: Chrome

Chrome or Firefox are good choices for debugging code, both have quality inspectors to see code structure, console errors, network events, local and session storage, React components structure, analytics tabs and much more! Throw a pointer in there and start debugging (read more here).

Start

1.Navigate in your terminal where you’d like to store your project
cd ~/code

2. We’ll follow Reacts how-to guide for spinning up a React app with Next.js
npx create-next-app@latest

3. This will ask you a series of questions — name your project and press enter for each of the questions to initialize a basic app

4. Navigate into the application directory and open it in VSCode
cd elana-olson-react-next-app
code . // opens VSCode from terminal

5. Now let’s serve this baby up and see what we’re working with! Navigate to the README.md and press ⇧⌘V in the editor to preview the markdown.

The README.md tells us to run the development server, type into the terminal
yarn dev

6. Once you see ✓ Ready in the terminal, navigate to http://localhost:3000 in Chrome and you’ll see something like this:

Congrats! You now have a Next.js React app running!

Understanding the Code

You can read this code in github in the example app: react-portfolio-app

Let’s investigate the initialized files, Next.js documents the project structure well , but we’ll briefly review what the top level files and folders are for.

.next | Stores features that help with performance like page caching

node_modules | Stores the packages and dependencies defined in package.json

public| Stores publicly accessible files like assets (images)

src | Stores all our custom source code 💚

.eslintrc.json | Configuration for ESLint. ESLint helps us define specific patterns for JavaScript and catch problematic patterns before deploying.

.gitignore | Defines which files/folders not to publish to the repository. Files and folders like node_modules which are far too big to publish or secret files that would expose vulnerable credentials.

next-env.d.ts | TypeScript declaration for Next.js

next.config.mjs | Configuration for Next.js

package.lock.json | Automatically generated by the package manager… don’t manually change this file.

package.json | Defines project scripts and dependencies to enable us to run the project

postcss.config.js | Configuration for css

README.md | An engineer’s “How To” guide and crucial documentation for how to use this project

tailwind.config.ts | Configuration for tailwind css

tsconfig.json | Configuration of TypeScript strictness, structure, and compiler

README, package.json, & tsconfig.json

The most important files to review in any project are: README.md , package.json , & tsconfig.json , though all configuration files will impact the structure and strictness of your code.

The scripts section defines what commands we run in the terminal to develop, compile, start, and analyzing code for potential errors. For each of them, type Yarn in front of it to run the script.

Notice that we are on the latest versions of React, React-dom, and Next — this is a good practice to follow of staying up to date with all dependencies, but especially the foundational libraries and frameworks.

In the tsconfig.json we want to pay attention to module and moduleResolution — these two define how TypeScript scopes global and local state (i.e. Modulaization determines whether a variable in a file is readable and usable outside of that file or package). Using moduleResolution: bundler allows us to define global state via "imports" and "exports" without needing file extensions on relative paths. You can read more here to further understand module theory and how to apply it to your app.

src/

Now that you understand the root level files, take a look into the src/ folder (otherwise known as app). The key files here are layout.tsx and page.tsx — Next.js uses pages and layouts to define routes and components in the app.

Pages

In Next.js, a page is a React Component exported from a .js, .jsx, .ts, or .tsx file in the pages directory. Each page is associated with a route based on its file name.

We can think of pages as routes and the pages directory as the root folder/home for all our routes. So if you want to create an About page on your website, it would be accessed at /about and housed in the codebase under pages/about.ts .

Layouts

The React model allows us to deconstruct a page into a series of components. Many of these components are often reused between pages. For example, you might have the same navigation bar and footer on every page.

Layouts enable us to create reusable patterns for our app, either for the entire app or per-page.

Next.js details an excellent guide to Page and Layout usage.

Component libraries

A component library is a set of frontend reusable components that are frequently used throughout an application. The library should follow accessibility standards, themes, and enable you to quickly plug and play components into your app so you don’t have to create entirely new basic components like buttons and menus.

The cons to a library are: you need to familiarize yourself with all the components and there are limitations to what those components will do — they will not cover every edge case or design that you have in mind. In cases where you’re building a very simple app, a component library could be a hindrance, but component libraries can be powerful tools once learned!

Checkout these various UI libraries or incorporate one you are already familiar with! The point of using one is to speed along your coding, so go with something you like.

Material UI (Optional)

Here’s a short article I wrote detailing how to integrate material ui into a react nextjs app.

Hooks and the Component Lifecycle

Now that we have an army of tools at our command, we need to understand how to wield them…. so the render cycle is of utmost importance! “Hooks are functions that let you “hook into” React features like state, lifecycle methods, and context from your function components,” (The Power of React Hooks).

We can tap into the React render lifecycle in the three phases — mount, update, unmount — using hooks. The mount phase allows us to insert elements into the DOM, set initial state, and load the elements on the first render. The update phase occurs when props or state changes and we need to update the component, which retriggers the render() function. Finally, the unmount phase removes the react component from the DOM and cleans up any related state.

I suggest reading The Lifecycle of a React Component to understand what React methods are called during these phases. When using hooks, we don’t call the React functions likegetDerivedStateFromProps()directly, the hooks do this for us. Hooks like useState will initialize, update, and clean state for us as we use the component. The article React Component Lifecycle Methods with React Hooks outlines this relationship and how to transition your use of lifecycle methods to hooks.

The key takeaways here are (1) we need to understand the lifecycle of a React component to know how to update data and (2) hooks help us do this smoothly.

Checkout React’s docs to thoroughly understand the usage of hooks.

That’s all folks! If you think I’ve missed anything or you gave this tutorial a whirl, please leave some feedback! Hope this helps you enter the wonderful world of React coding 😺

A short packing guide to get you out the door on your next adventure!

All the things I’ve learned from traveling, backpacking, and adjusting to different weather. This is what has worked for me — having enough clothing for all scenarios, being flexible with changing environments, and saving room for the memories!

This packing list is oriented around outdoor activities like hiking and beach going, generally warmer weather climates, and a few city days interspersed. If you lean more outdoorsy or city oriented, adjust this list as fits you.

Shoes

• Sneakers (Altra Lone Peak trail runners)
• Sandals (Teva classic or midform universal)

Clothing Essentials

• Rain jacket shell
• Light sweater/cardigan/hoodie
• Button down sun cover (Zara has some thin button downs)
• longsleeve merino wool shirt
• 2 athletic tank tops with built in bras
• 2 loose tshirts
• fun going-out blouse
• leggings
• flair loose pants or longer skirt
• athletic shorts
• swimsuit
• 2 bras
• 2 sports bras
• 9 pair underwear
• 4 pair socks (2 hiking socks, 1 lowpro, & 1 cozy pair)
• set of loose pajamas

If colder weather add:

• Ultralight down jacket
• longsleeve shirt
• pants
• Scarf
• Beanie

If hotter & sunnier weather add:

• sun cover
• swimsuit
• 2 loose tank tops
• shorts

Accessories

• Small daypack
• Bumbag/fanny pack
• Tote bag
• Hat (baseball cap is easy to pack)
• 2 pair sunglasses (I typically break one)

Other Essentials

• Lifestraw water filtering water bottle (liter)
• Microfiber towel
• Paper copies of all important documents (passport, visas, credit cards, IDs, vaccination card)
• Earplugs (wax earplugs are the best)
• Eyemask
• Small combination lock (for hostels)
• Earbuds
• Portable charger (Anker PowerCore II Slim 10,000 is great)
• Short charging cord with USB A (for hostels and hotels)

Nice to Haves

• Yoga Mat (Jade Yoga makes a thin travel mat)
• Massage cork ball (Rawlogy makes a travel size)
• Reusable spork
• Resuable ziplock bag (for leftovers)
• Noise cancelling headphones (Bose Quiet Comfort are excellent)
• iPad
• Journal
• Art supplies for painting
• Sudoku or crossword
• Longer charging cord

Toiletries

Not a comprehensive list, but here are a few items I personally love while traveling

• So much sunscreen
• Face moisturizer
• Menstrual cup
• Shampoo and conditioner bars
• Argon oil for hair (if swimming in the ocean)
• Dishsoap (good for getting out stains & cutting odors)
• Powder laundry detergent (handwashing along the way)
• Bug spray

Medicine

If you are going somewhere with non-potable water in the tap, a water filter is a good idea and so is some mediciation!

Azithromycin comes in handy when you contract some gnarly bacteria and need to give your gut a hard reset to save you from days or weeks of illness.

If you are going to high altitude (8,000 ft +) and have a history of altitude sickness, then Acetazolamide will help alleviate some of the symptoms. I spent over a week in Cusco, Peru which rests at 11,000 ft and the medication helped me acclimate so that my stay was actually enjoyable.

Probiotic vitamins are an excellent way to keep your gut consistent through all the changing environments and food you eat while traveling.

While bug spray may be easy to come by, anti-itch cream like Coritzone can be hard to come by in places like South America. I was dying with itchy bites and dreamt of some relief for a few weeks.

Luggage

Carry-on only! You save so much money by only doing carry-on, it allows you to board planes, trains, buses, and local taxis easily.

Pack vs Suitcase

I recommend using a backpacking pack because it offers walkability on dirt and cobblestone roads, it centers the weight on your hips, and you can keep it close to your body in sketchier areas.

• Load your pack with the heaviest gear in the middle and center area of the pack.
• Using color-coded stuff sacks or packing cubes with a backpacking pack will save you a TON of time when locating what you need.
• A rain cover is pretty essential, but if you’re cheap like me, a simple plastic poncho will do the trick to keep you and your pack covered

If you have back issues or just don’t want to use a pack, a softside suitcase offers more room and expandable options. While four wheels may be easier to push around on flat smooth surfaces, a two wheel suitcase is more durable because the wheels are less likely to break off.

That’s all folks! Please let me know if you think i’ve missed any must-haves that you found valuable in your travels 😺

You can view the full change here if you’re impatient 😄, it’s part of a larger project for a react-portfolio-app.

Start by following the general installation guide here where we install Material UI, emotion/react, and emotion/styled for customized css.

yarn add @mui/material @emotion/react @emotion/styled

We can use Emotion styled components to define React components with styling attached to them. This makes our code more readable because everything is in a JSX format and the styling is contained in a reusable component.

Specific configuration changes for NextJS

There are three changes we need to make to the application

1. Add App Router
2. Create a theme
3. Consume the theme in a ThemeProvider client-rendered file

We need to install specific dependencies for NextJS integration with Material UI, which involves using the App Router instead of Page Router.

yarn add @mui/material-nextjs @emotion/cache

1. Add App Router

Add AppRouterCacheProvider to the root layout

// app/layout.tsx
import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter';

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <AppRouterCacheProvider>
          {children}
        </AppRouterCacheProvider>
      </body>
    </html>
  );
}

2. Create a Theme

Create a file theme.ts and define the theme to be used by the ThemeProvider as outlined in the doc.

// app/theme.ts
'use client';
import { Roboto } from 'next/font/google';
import { createTheme } from '@mui/material/styles';

const roboto = Roboto({
  weight: ['300', '400', '500', '700'],
  subsets: ['latin'],
  display: 'swap',
});

const theme = createTheme({
  typography: {
    fontFamily: roboto.style.fontFamily,
  },
});

export default theme;

3. Consume the theme in a ThemeProvider client-rendered file

Instead of adding the ThemeProvider directly to the root layout.tsx , you’ll need to create a separate file containing ThemeProvider and call that in layout.tsx . We do this because ThemeProvider sets up a client-side context which cannot be rendered server-side, so we pull the code into its own client-rendered file and call it in layout.tsx .

In this new file called StyledRoot.tsx, we start the file with ‘use client’ to signify this is a client-side rendered file (read more here). Here’s what the file will look like:

// app/StyledRoot.tsx
'use client';
import { ThemeProvider } from '@mui/material/styles';
import theme from './theme';

export function StyledRoot({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <ThemeProvider theme={theme}>
      {children}
    </ThemeProvider>
  );
}

Then we add it to layout.tsx which will pass child components through to StyledRoot.tsx

// app/layout.tsx
import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter';
import { StyledRoot } from './StyledRoot';

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <AppRouterCacheProvider>
           <StyledRoot>{children}</StyledRoot>
        </AppRouterCacheProvider>
      </body>
    </html>
  );
}

And that’s it!

Now you have Material UI up and running with a NextJs app. The next step is to start adding components!

Start by perusing the component library — see what components support your design and look at the code examples for how to implement them!

Another great resource are the Material UI templates which use most of the Material UI components in real world examples. I find these examples to be the most useful — I took a special interest in the Blog template when building my portfolio app.

That’s all folks! Please let me know if you found this article helpful and if it’s missing any important details!

Visualizing the steps ahead

Visually seeing what an Angular application is made of can help you understand the steps in a bigger-picture way as we go through them. I like to know what I am getting into before I go chasing down a rabbit hole and so here is what to expect.

Step 1: Setting up your dev environment

To quickly get your environment up and running, follow these steps to build locally on your own machine.

1. Install Node.js

Download Node.js

*optionally: Install nvm (node version manager) if you want to manage different versions of node for each of your projects.

2. Install a package manager to manage your project dependencies.

You can use npm (node package manager) or yarn. Npm already comes installed when you install Node and for this demo we will use npm as our package manager.

3. Install the Angular CLI for building and running your app

Open your CLI/terminal and go into a directory you want to create your Angular application in, then run:

npm install -g @angular/cli

4. Create the initial app using Angular CLI commands

Give you project a name, here we are building an application to display different types of fish, so we will name it fish-app. This will take a moment as the Angular CLI initializes everything for the app.

ng new fish-app

5. Serve the app

Go into the app you just created and serve the app. The app builds to http://localhost:4200/ and will open automatically.

cd fish-app && ng serve --open

You now have a running application that looks like this. Woohoo!

From here you will be adding your own content and styling to the app. Take a look at app.component.html for You can define all CSS in styling.css and change the root HTML file app.component.html to load custom content.

Step 2: Start Building

Web applications are broken up into views which control sections of the screen. Angular calls these views components. We use the Angular CLI command ng generate component to create custom components that handle larger features like the home page, toolbar, or fish-profile.

ng generate component fish-profile

This command initializes a TypeScript, HTML, CSS, and Spec file (for testing) for each component, and it will add that component to app.module.ts. This last part is very important because it allows the component to be used by all other components within your app by providing it to the root organizer — app.module.ts.

Every component has a selector which acts as the unique identifier/name when using a component in an html file. You simply add this selector as seen below to another component’s template (like app.component.html) and now you are using the component.

<app-fish-profile></app-fish-profile>

Notice the component is exported as a class named FishProfileComponent and is added to app.module.ts. All dependencies for the app are imported to the app.module.ts.

Utilizing Angular Material

Angular Material is a UI component library that provides examples of common-use components like lists, tables, dropdown menus, etc. It follows Material Design principles to help you quickly implement common interaction patterns. See Angular Material’s installation guide for adding it to your project.

Let’s take a look at how to use an Angular Material component like Mat-Card:

*Angular Material components are always named with this naming scheme: mat-_____ (mat-card, mat-menu, mat-list,…).

Step 3: Navigate Views

Onto routing! Routing allows you to serve a SPA (single page application) with multiple urls. SPAs help reduce latency and limit back-and-forth communication to the server by “dynamically rewriting the current page rather than loading an entire new page from the server,” (Wikipedia).

So let’s add some new urls to our app and see how to implement routing.

Routes are defined in the app-routing.module.ts or app-module.ts. You need to import the RouterModule and then define the routes. Routes are defined by creating a path that points to a particular component so when that route is referenced, it loads that particular component.

See the source code for fish-app to see how the application renders different routes through the router-outlet in app.component.html. The app currently loads FishProfileComponent as the landing page since it is defined as the root path.

Step 4: Manage Data

Services help components map API calls to fetch data from remote servers. Data is shared by all components via dependency injection through the service.

A service is defined as a class with functions and data structures used to fetch or house data from a database. It uses Injectable to allow components to inject the service into the component class and utilize its functions.

Once a service has been injected into a component, all functions and data are accessible to the component.

Step 5: Collect User Data

Angular Forms enables you to capture and validate user input and track input changes. There are two types of Angular forms — Reactive Forms and Template-Driven Forms.

The key differences between these two forms is: (1) Reactive forms update the HTML content based on changes made to the component while Template-drive forms derive changes from within the HTML template; (2) Reactive forms are synchronous while Template-driven forms are asynchronous.

We are using Reactive Forms which allows us to define forms from the component class. Add ReactiveFormsModule to app.module.ts, as well as, MatFormsFieldModule and MatInputModul to use Angular Material forms.

Now, see how we define a FormGroup that contains several forms for input from the component class and bound in the template. Binding is denoted with [] to identify the formGroup we are using is the submissionForm defined in the component.

[formGroup]="submissionForm"

Step 6: Compile Project & Deploy

This step is really up to you since it depends on what you want to do with this web app. Some options are:

• Deploy to Firebase
• Build a 3-tier application with a backend and database
• Publish as a website on Github Pages

If you are ready to deploy and need to host some simple data, Firebase may be your answer. Or, if you want to write custom queries and define your own middlewear, then building a 3-tier app could be right for you. Or, if you want to publish this app as a personal or project website, you could deploy onto Github Pages.

Deploy to Firebase

Firebase is an easy way to host your website and add additional backend capabilities like authentication, data querying, and storage. It takes care of the backend functions for you and allows you to quickly get your web app up and running. Angular has its own library for firebase called angular/fire where you can implement these capabilities for an Angular app.

Follow these steps for deploying your app to Firebase:

1. Sign up for a Firebase account and create a project. Your app will be hosted at https://your-firebase-project-name.firebaseapp.com.

3. Install Firebase tools

npm i -g firebase-tools

4. Connect your local Angular project on Firebase

firebase login
firebase init

5. Build project

ng build --prod

6. Deploy to Firebase

firebase deploy

Viola! You are deployed.

Build a 3-tier application

Applications can be multi-tiered to separate the user interface from your business logic and data storage. A common architecture is 3-tier where there are presentation, logic, and data tiers.

• Presentation tier (client) is your Angular app rendered by the browser.
• Logic tier (server/middlewear) is another app written in Node.js, Django, Rails, Java, etc to handle authentication, authorization, database queries, and interactions with external APIs.
• Data tier is typically a SQL or NoSQL database like PostgreSQL or MongoDB.

One implementation of a 3-tier app is called a MEAN stack. MEAN stands for MongoDB, Express.js, Angular, Node.js. Angular as the client, Node.js and Express.js as the middlewear, and MongoDB as the NoSQL database.

Conclusion

Angular is a robust platform that provides you with the tooling to create multifaceted dynamic web applications. The faster you can get started with Angular, the more you can learn and implement in your project. My goal is to speed up this initial process by providing a 6-step guide to visually understanding and creating your Angular app.

Source Code: github.com/ellamaolson/fish-app

Let me know what you think and if you have an helpful insights for improving this guide!

How to create an Angular app in no time was originally published in Angular Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

Github Pages allows you to host your own personal or project website for free! Though you cannot run a large business off of it, you can host static websites built with HTML, CSS, and JavaScript. We will take a look at how to deploy an Angular application as your personal website on Github Pages. Here’s my example of hosting on Github Pages — ellamaolson.github.io.

Understanding how to use Github Pages

Github Pages hosts a website directly from a Github repository by using the index.html file as the entry point for hosting your application. If it cannot find this file at the root level, it publishes the readme.md instead.

Personal and organization websites are published from the master branch, while project websites can be published from master or gh-pages branches. See your Project Settings/Github Pages to confirm which Source branch you can publish from.

Building your Angular app for Github Pages

Since an Angular app places the index.html within the src/ folder of you app, Github Pages won’t be able to render your app. We need to reconfigure the layout of the app so that the index.html is at the root folder using angular-cli-ghpages.

npm i -g angular-cli-ghpages

Angular-cli-ghpages will render your Angular application into several JavaScript files and an index.html file at the root folder. Therefore, your master branch will serve as a deployment branch and your develop branch will track the development process and hold your actual app.

git checkout -b develop

Set your default branch to the develop branch so you can see your application code instead of the rendered JavaScript in master.

Two changes to the Angular app

There are two small changes you want to make to your angular code to ensure your JavaScript build is successful.

First, change the build outputPath in your angular.json file to build just to the dist folder and not dist/app.

Second, make sure all images you reference are saved within assets/images/.

./assets/images/photo.png

To learn more about developing an Angular application, read how to create an Angular App in no time.

Deploying your app

Each time you want to deploy to your website, you will pull the changes made in develop to master, build your application, and deploy it to master. This way you keep your development branch clean of rendered JavaScript builds and only deploy to master.

git checkout master
git pull origin develop
ng build --prod --base-href 'https://username/repo.github.io/'
ng deploy -—branch=master

The deployed code on master looks like this:

Now make sure to delete those pesky build files from your local develop branch and do not commit them to github. Even though they are deployed to master, the build files will still be created in the develop branch.

Your develop branch will look something like this — a typical Angular app.

Viola! You have your personal website up and running through Github Pages.

You can view this code at github/ellamaolson/ellamaolson.github.io

I hope this helped you find a faster solution to deploying an Angular app to Github Pages. Please let me know of any other solutions you may have found and comment below!

References

• Adding an existing project to Github Pages
• Configuring a publishing source
• Stack Overflow — changing source branch
• Deploying with master/docs branch
• Adding a custom domain to your github project

Deploying a personal website built in Angular to Github Pages was originally published in Angular Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

We’re announcing two new tools that will help.

Angular is the name for the Angular of today and tomorrow.
AngularJS is the name for all 1.x versions of Angular.

ngMigration Assistant

ngMigration Assistant is a command-line tool that analyzes an AngularJS application and recommends a migration path. It provides statistics on the complexity, size, and patterns of an app. It outlines the necessary preparation work for migrating to Angular.

ngMigration Assistant is designed to supply simple, clear, and constructive guidance for how to migrate your application. It analyzes any AngularJS app — big or small — and makes recommendations about possible approaches that may suit your application. It doesn’t take into account every possibility, but considers some of the most important factors to consider, such as code size/complexity.

Here’s an example using the AngularJS phone catalog application. With the simple command ngma with the app directory, we can see an analysis of our app and can see recommendations.

First the tool provides statistics about what was detected in the application. If necessary, preparation steps for migrating to Angular are shown.

To learn more, visit ngMigration Assitant.

ngMigration Forum

The new ngMigration Forum is a community hub that provides a starting place to find information about migration paths, tools, and to consolidate some of the best information and experts from the web.

ngMigration Forum is geared towards answering your migration questions, identifying useful tools, and directing you to a migration solution. It is a place to learn, discuss, and share information on migrating to Angular.

In the Forum, you will find a array of useful information ranging from explanations of why upgrading is important from a technical and business perspective to an overview of the available migration paths.

There are many migration paths (many of which can be combined) covered in the forum, and we hope that the community will work together to share their experiences and expertise.

For each migration path, you can read more in depth and learn about how each one works, awesome tools to help, examples, helpful content, and consultants available to help you throughout the migration process.

Finally, we want developers to ask and answer questions surrounding migrating all in one place through the Issues tab. Here, you can review previously asked issues and support the community through useful insights.

ngMigration Forum is the place to bring all our thoughts and insights together, to share useful information and awesome tools.

To learn more, visit ngMigration-Forum.

If you have an AngularJS project you are considering migrating to Angular, download the ngMigration Assistant, visit the ngMigration Forum, and share your experiences so we can continue to make this process better.

2 New Tools to help with AngularJS to Angular Migrations was originally published in Angular Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.