React 18 Alpha With Snowpack and Vercel

If You Prefer Watching a Video…

Be sure to Subscribe to the Official Code Angle Youtube Channel for more videos.

Table of Contents

  1. Introduction
  2. Installation and Set up of React Using Snowpack
  3. Folder Structure
  4. Code Overview
  5. Running the Application
  6. Deployment Process Using Vercel
  7. Conclusion

Introduction

Earlier this month the React Team released some updates concerning the release of React 18. These updates include the following:

  • Work has begun on the React 18 release, which will be the next major version.
  • A working group has been created to prepare the community for the gradual adoption of new features.
  • An Alpha version has already been published for library authors to try and provide valuable feedback.

This tutorial aims to set up the React 18 Alpha version using SnowPack, a lightning-fast front-end build tool, designed for the modern web. Then we deploy on Vercel.

Installation and Setup of React 18 Alpha Using Snowpack

First, you need to have Node.js installed, once that is done then you can now install Snowpack. You can use the command below to install Snowpack.

npm install snowpack

Once installed, you can head to a directory where you want to put your new project.

Now run the following command in your terminal to create a new directory called react-snowpack. This will automatically generate a minimal boiler plater template.

npx create-snowpack-app react-snowpack --template @snowpack/app-template-minimal

You can now head to the new directory with the following command:

cd react-snowpack

Once inside this directory, we can finally install the React 18 Alpha version by running the command below.

npm i react@alpha react-dom@alpha

Once this is done, you can check your package.json file to confirm React 18 Alpha has been installed. It should look something like what we have below.

  "dependencies": {
    "react": "^18.0.0-alpha-cb8afda18-20210708",
    "react-dom": "^18.0.0-alpha-cb8afda18-20210708"
  }
}

Folder Restructure

React makes use of a templating language called JSX. JSX stands for JavaScript XML. It is an inline markup that looks like HTML that gets transformed to JavaScript at runtime.

The First step towards the folder restructure is to rename the index.js file with a jsx extension like so, index.jsx. Doing this will allow Snowpack to know that we are running a React project.

In the end, we should have the folder structure below.

> public
  > index.css
  > index.html
> src
  > App.jsx
  > index.jsx
.gitignore
 package-lock.json
 package.json
 snowpack.config.mjs

Code Overview

We are going to have code modification in four files (index.html, App.jsx, index.jsx, and snowpack.config.mjs) before we start up the app and deploy it on Vercel.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Starter Snowpack App" />
  <link rel="stylesheet" type="text/css" href="https://dzone.com/index.css" />
  <title>Starter Snowpack App</title>
</head>

<body>
  <div id="root"></div>
  <script type="module" src="/dist/index.js"></script>
</body>

</html>

In the index.html code, three things have to be noted:

  • The id is called root which we will refer to in the index.jsx file.
  • In the script tag, we have a type called module to enable snowpack to know we will be making use of ES6 syntax.
  • Also in the script tag, we have an src attribute to signify the path of our deployment directory which will be configured in the snowpack.config.mjs file.

App.jsx

import React from "react";

function App() {
  return (
    <div>
      <header>
        <img
          src="https://res.cloudinary.com/dz4tt9omp/image/upload/v1625528354/react.png"
          alt="logo"
        />
        <p>React 18 Alpha Setup Deployed on Vercel with SnowPack</p>
      </header>
    </div>
  );
}
export default App;

Above in the app.jsx file, we generate a simple React boilerplate template using a functional component.

index.jsx

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

const rootElement = document.getElementById("root");
const root = ReactDOM.createRoot(rootElement);
root.render(<App />);

In the index.jsx file, we did three things to enable us startup the app.

  • First, we import React, ReactDOM, and the App.jsx file.
  • Then we created a variable to get the id in the index.html file.
  • Finally, we made use of the new createRoot API in React 18 to render the application.

snowpack.config.mjs

/** @type {import("snowpack").SnowpackUserConfig } */
export default {
  mount: {
    /* ... */
    public: "https://dzone.com/",
    src: '/dist'
  },
  plugins: [
    /* ... */
  ],
  routes: [
    /* Enable an SPA Fallback in development: */
    // {"match": "routes", "src": ".*", "dest": "/index.html"},
  ],
  optimize: {
    /* Example: Bundle your final build: */
    // "bundle": true,
  },
  packageOptions: {
    /* ... */
  },
  devOptions: {
    /* ... */
  },
  buildOptions: {
    /* ... */
  },
};

Every Snowpack app makes use of the snowpack.config.mjs file for any configurations like the deployment process. In this project, we will only edit the mount object by adding the public and src keys.

These serve as a pointer to the path where our deployment folder will be built when we run the build command.

Running the Application

Now with all our files saved, we can head back to our terminal and run the start command npm run start, which will produce the page below in the browser.

Application Running Screen in Browser

Now our React 18 alpha app is successfully up and running.

Deployment Process Using Vercel

“Vercel enables developers to host websites and web services that deploy instantly and scale automatically all without any configuration”. -Vercel Documentation

The first step towards deployment is running the command below at the root of our project.

npm run build

This will generate a build directory. Inside the build directory is a dist folder that contains the code we will push to Vercel.

Next up we do the following:

1. Install Vercel 

To do this we run the command npm i -g vercel

2. Log Into Vercel

After installing Vercel globally on your machine. Type vercel in the terminal. This will prompt you to log into your account if you are not already logged in.

3. Project Setup and DeploymentProject Setup and Deployment UI

To summarize the prompt question in the image above, the following questions will be asked:

Vercel will now build the application, installing all dependencies in the process. When the installation is done, a inspect link will be available in the terminal. With this link, we can access the Vercel dashboard to see our deployed app.

Deployed Application in Vercel Dashboard 

4. Open the Deployed Project

You can now visit the newly deployed project by clicking on the “visit” button on your dashboard shown in the image above.

Opening Deployed Project

Conclusion

You can find the deployed code in my GitHub account.



Source link

Write A Comment