Netlify-React-Hello-World.md

Hello!

This is a step-by-step guide on how to deploy a basic React Hello World app to Netlify!

Requirements

• Github CLI needs to be installed
• NPM also needs to be installed
• Netlify CLI also ALSO needs to be installed AND you need to have a free Netlify account.

First Steps: Creating a basic Vite starter project

1. npm init vite@latest <project name>
2. Select a framework:
   • React
3. Select a variant:
   • TypeScript + SWC (faster build time)
4. Following the instructions in the terminal, we...
   • cd <project name>
   • npm install
   • npm run dev
   • ✨ Click on the local URL that Vite generated to see your app running! ✨

Next Steps: Getting it ready for Netlify deployment

5. Open a new terminal tab pointing to your project directory.
6. Run git init to initialize a new git repo within your project.
7. With Github CLI installed, run gh repo create
   • What would you like to do?
     • Push an existing local repository to GitHub
   • Path to local repository
     • (Leave blank and press enter)
   • Repository name
     • (Leave blank and press enter, OR create a new name for your project on GitHub to avoid name conflicts)
   • Optionally press enter for the repository owner and description fields, and make your selection for Visibility.
   • Press enter when prompted to add a remote, then enter to name the remote "origin".
8. Now let's check your git status by running git status in the command line.
9. git add .
10. git commit -m "Initial Commit or your message here"
11. Try git push for fun? Follow the instructions that follow.

Netlify Time

12. netlify init
    • What would you like to do?
      • Create and configure a new site
    • Follow the prompts and don't forget to name your site or else you'll get a random slug generated for you. If you like the defaults just press enter to continue.
13. Let's make an adjustment to the netlify.toml file that was just generated and uncomment the following block in the file:
    • code . <-- if you have set up VS Code to open via terminal command

[[redirects]]
from = "/*"
to = "/index.html"
status = 200

16. git status, git add ., git commit -m "Message here" then git push
17. netlify open to open the Admin Panel for your brand new Netlify-deployed site!

Some coding time

18. Replace the App() function inside App.tsx with the following:

function App() {
  return (
    <>
      <h1>Hello, World!</h1>
    </>
  )
}

Quick Detour: React Router DOM

19. We are going to follow some of the instructions from React Router DOM for the next steps.
    • npm install react-router-dom
    • main.tsx edits:

import {
  createBrowserRouter,
  RouterProvider
} from 'react-router-dom'

...

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />
  },
]);

...

// Replace <App /> with:
<RouterProvider router={router} />

20. Error handling with React Router DOM:
    • touch src/Error.tsx

import { useRouteError } from "react-router-dom";

export default function Error() {
  // eslint-disable-next-line
  const error: any = useRouteError();
  console.error(error);

  return (
    <div id="error-page">
      <h1>Oops!</h1>
      <p>Sorry, an unexpected error has occurred.</p>
      <p>
        <i>{error.statusText || error.message}</i>
      </p>
    </div>
  );
}

• main.tsx:

import Error from './Error'

...

path: '/:displayName?',
element: <App />,
errorElement: <Error />

• App.tsx:

import { useParams } from 'react-router-dom'

...

function App() {
  const { displayName } = useParams();
  return (
    <>
      <h1>Hello, {displayName ?? 'World'}!</h1>
    </>
  )
}

21. Don't forget to push your changes to deploy to Netlify!

BONUS: Tailwind CSS

Following the guide from Tailwind CSS, we:

22. npm install -D tailwindcss postcss autoprefixer
23. npx tailwindcss init -p
24. Edit tailwind.config.js:

export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],

25. Edit src/index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

26. netlify dev
27. Edit src/App.tsx:

<h1 className="text-3xl font-bold underline">
  Hello, {displayName ?? 'World'}!
</h1>

28. Again, make sure you push to GitHub to deploy your changes to Netlify :)