Umbraco 11 + .NET 7 + React + Vite + Hooks Part 2
Tags: webdev, umbraco, react, vite
Published: 2023-04-04 21:38:07

## Last article we discussed how to create empty umbraco site with strongly typed model, if you didnt read it, please read [here] (https://dev.to/mozaky/umbraco-11-net-7-react-hooks-5fc5) it because will continue from we left it off

#Create React App No Longer the Standard
React developer team recently removed create-react-app from the official documentation. This means it is no longer the default method of setting up a new project in React. According to [this](https://github.com/reactjs/react.dev/pull/5487) pull request on Github, create-react-app is finally gone.



first lets create react app using vite 
within project folder
open the terminal and type this command
``npm create vite@latest ClientApp --template react``
update package.json to be like this
```json
{
  "name": "clientapp",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "start-dev": "tsc && vite build --emptyOutDir --mode development --watch",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.10.0"
  },
  "devDependencies": {
    "@types/node": "^18.15.11",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react": "^3.1.0",
    "typescript": "^4.9.3",
    "vite": "^4.2.0"
  }
}

```
- run ``npm install`` to install packages

then update vite.config.ts

```js

/// <reference types="node" />

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path';

const root = path.join(__dirname, './');
const main = path.resolve(__dirname, 'src', 'main.tsx');

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => ({
  plugins: [react()],
  publicDir: command === 'build' ? false : 'src/assets',
   root: root,
  resolve: {
    extensions: ['.js', '.jsx', '.tsx', '.ts'],
  },
  server: {
    port: 3000
  },

  build: {
    outDir: './dist/umbraco-app',
    minify: mode === 'development' ? false : 'terser',
    brotliSize: false,
    manifest: false,
    sourcemap: command === 'serve' ? 'inline' : false,
    rollupOptions: {
      input: {
        main: main
      },
      output: {
        assetFileNames: 'assets/[name][extname]',
        chunkFileNames: 'chunks/[name].[hash].js',
        entryFileNames: 'js/[name].js',
      },
    },
  },

}));

```

- create pages folder and within this folder
add 4 pages
- Home.tsx
- About.tsx.
- Contact.tsx
- NotFound.tsx
## Home Component Syntax
```jsx 
export const Home = () => {
  return (
    <>
      <h4>Home Works</h4>
    </>
  );
};

```
- update content of App.tsx
```jsx

import reactLogo from "./assets/react.svg";
import viteLogo from "./assets/vite.png";
import { HashRouter as Router, Routes, Route, Link } from "react-router-dom";
// we're using Hash Router to override umbraco routing when  page is refreshed 
import { Home } from "./pages/Home";
import { About } from "./pages/About";
import { ContactUs } from "./pages/Contact";
import { NotFound } from "./pages/NotFound";
import "./App.css"; 
export const App = () => {
    return (
      <div className="App">
        <div>
          <a href="https://vitejs.dev" target="_blank">
            <img src={viteLogo} className="logo" alt="Vite logo" />
          </a>
          <a href="https://reactjs.org" target="_blank">
            <img src={reactLogo} className="logo react" alt="React logo" />
          </a>
          <a href="https://reactjs.org" target="_blank">
            <img
              src="https://user-images.githubusercontent.com/6791648/60256231-6e710c00-98d1-11e9-8120-06eecbdb858e.png"
              className="umbraco logo"
              alt="umbraco logo"
            />
          </a>
        </div>
        <h1>Vite + React + Umbraco</h1>
        <Router>
          <nav>
            <ul>
              <li>
                <Link to="/">Home</Link>
              </li>
              <li>
                <Link to="/about">About </Link>
              </li>
              <li>
                <Link to="/contact">Contact </Link>
              </li>
            </ul>
          </nav>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
            <Route path="/contact" element={<ContactUs />} />
            <Route path="*" element={<NotFound />} />
          </Routes>
        </Router>
        <div className="card"></div>
      </div>
    );
};

export default App;

```
> run the app `` npm run start-dev ``

## so far we only created SPA in vite, to integrate with umbraco please follow thse steps
**open VScode and install this nuget package**

``dotnet add package Microsoft.AspNetCore.SpaServices.Extensions``
edit startup class ConfigureServices function
```cs
   public void ConfigureServices(IServiceCollection services)
        {
            services.AddUmbraco(_env, _config)
                .AddBackOffice()
                .AddWebsite()
                .AddComposers()
                .Build();
            services.AddSpaStaticFiles(configuration =>
            {
                configuration.RootPath = "ClientApp/dist/umbraco-app";
            });
        }

```
update configure function 
```cs
 public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            app.UseRouting();

            app.UseUmbraco()
                .WithMiddleware(u =>
                {
                    u.UseBackOffice();
                    u.UseWebsite();
                })
                .WithEndpoints(u =>
                {
                    u.UseInstallerEndpoints();
                    u.UseBackOfficeEndpoints();
                    u.UseWebsiteEndpoints();
                });
            app.UseDefaultFiles();
            app.UseStaticFiles(new StaticFileOptions
            {
                
                FileProvider = new Microsoft.Extensions.FileProviders.PhysicalFileProvider(
                               Path.Combine(env.ContentRootPath, "ClientApp/dist/umbraco-app")),
                RequestPath = "",
                OnPrepareResponse = ctx =>
                {
                    // Set cache control header to allow caching of static files
                    ctx.Context.Response.Headers.Append("Cache-Control", "public,max-age=31536000,immutable");
                }
            });
            app.UseEndpoints(endpoints =>
           {
               endpoints.MapControllers();

               endpoints.MapControllerRoute(
               name: "Default",
               pattern: "",
               defaults: new { controller = "Home", action = "Index" });
 endpoints.MapFallbackToController("Index", "Home");
           });


            app.UseSpa(spa =>
            {

                spa.Options.SourcePath = "ClientApp";
                if (env.IsDevelopment())
                {

                    spa.UseReactDevelopmentServer(npmScript: "start-dev");
                }
               
            });

        }
```

> Now we need to tell VS Code how to run your project.
Open the command palette, you can use the shortcut ``Ctrl+Shift+P``, and type in Tasks: Configure and select the Tasks: Configure Task option:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mmknbohr48jgnutcy7dg.png)

> Select "Create task.json from template"

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5vsvw10nnnt8bqkpjntx.png)

> Now select ".NET Core" as your template.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/534x3m0eklcoqpwfwbaz.png)

After this VS Code will have created a folder called .vscode that contains a file called ``tasks.json``, it's this file that tells VS Code how to build your project.
Now that we've told VS Code how to build your project, we need to tell it how to launch it. VS Code can do this for you. First, select the little play button in the left side menu, and then select the "create a launch.json file" link.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/evz9qao9sb7b8bzp18oz.png)

- This will prompt a menu to appear, select: .Net Core

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9qvxwwaqvxxrk0id09s9.png)

#and that's it, you should find this output


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qsj92qd11ltcv8fqg5z1.png)


##next article i'll cover how consume content from umbraco through API's and render it home page using custom fetch hook in typescript

stay tuned
Socials:
LinkedIn: https://www.linkedin.com/in/mohammedzaky
GitHub: https://github.com/mozaky