In this tutorial, we will set up a development environment to use the technologies explained in day 27.
Setup (Frontend Development Environment)
An actual setup example is as follows. These are done in a different location than the Solidity project folder (Frontend and smart contracts are managed as separate repositories). The first command initializes Next.js. Subsequently, necessary modules are set up and a configuration file for prettier is copied.
% npx create-next-app@13.1.6
Need to install the following packages:
create-next-app@13.1.6
Ok to proceed? (y) y
✔ What is your project named? … nextjs-funding
✔ Would you like to use TypeScript with this project? … Yes
✔ Would you like to use ESLint with this project? … Yes
✔ Would you like to use `src/` directory with this project? … No
✔ Would you like to use experimental `app/` directory with this project? … No
✔ What import alias would you like configured? … @/*
Creating a new Next.js app in /Users/simokawa/code/token-village/nextjs-funding.
Using npm.
Installing dependencies:
...
% cd nextjs-funding
% npm install moralis react-moralis web3uikit moralis-v1 ethers
...
% npm install -D prettier tailwindcss postcss autoprefixer
...
% cp ../funding/.prettierrc .
% cp ../funding/.prettierignore .
% mkdir components
% mkdir constantsHere, npm or npx commands are used. This is to specify and install a version of Next.js with the first command. If using a newer version, the structure might have changed, and hence, settings need to be adjusted slightly differently from this guide.
Setting Up Tailwind / PostCSS
Tailwind is one of the CSS frameworks. It offers a philosophy of providing small, single-purpose utility (helper) classes, which can be combined to create any design or layout. As it is one of the PostCSS plugins, it is used together with PostCSS.
For instance, to change the color of the text in Tailwind CSS, you can add a class like text-red-500 to the HTML element to change it to red. Other styling is also applied by adding specific utility classes.
The tailwind.config.js configuration file specifies the location (and targeted extensions) of the tsx files to be included in the content.
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [ // add following two lines.
"./pages/**/*.{js,tx,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}Tailwind settings are added to the CSS used by default in Next.js (as shown in lines 2 to 4 of the following code example).
/* styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;PostCSS is a tool for parsing CSS and transforming it with plugins. This allows for converting advanced CSS features into formats usable by current browsers and optimizing or compressing CSS.
The configuration file for PostCSS, postcss.config.js, is set up as follows.
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}In summary, tailwindcss is a framework composed of small classes aimed at achieving specific purposes, intended for writing styles quickly and concisely. PostCSS and autoprefixer are plugins that optimize CSS while considering browser compatibility.
Directory Structure
Let’s look at the directory structure after executing the setup in the previous section and developing the pages and components of this chapter. It will be as follows:
.
├── .next/* # Result of Next.js build process (generated as needed with npm run build)
├── components/* # Files defining React components (these components are used in pages/index.tsx, etc.)
├── Fund.tsx # Part defining investor information and actions for investment and withdrawal (used in index.tsx)
└── Header.tsx # Defines the header part of the page (used in index.tsx)
├── constants/* # A place to store constants, such as information related to contracts
├── abi.json # File defining the interface of the target contract (e.g., input and output formats for calling the fund function)
├── contractAddress # Holds the address of the deployed contract (for each chain ID)
└── index.ts # File exporting variables containing the above two values (for importing and using in other files)
├── node_modules/* # Location where npm packages are installed
├── out/* # Generated when exported as a static site (created with npm run build if export settings are in next.config.js)
├── pages/* # Files in this directory are automatically recognized as routes
├── api/* # Directory for creating API routes. Files defined in this directory are treated as API endpoints and can execute server-side logic
├── _app.tsx # App component used if you have a common layout or state for all pages
└── index.tsx # Page displayed when the requested path is "/" (root, or home page)
├── public/* # Placing static files in this directory makes them directly accessible from the root directory
├── styles/* # Stores stylesheets and CSS modules
└── globals.css # CSS file for defining global styles. Used when applying to the entire application.
├── .gitignore # File defining files to be excluded from git (source management tool)
├── .prettierrc # Configuration file for prettier
├── .prettierignore # File defining files to be excluded from prettier
├── next.config.js # File for custom settings of Next.js
├── package-lock.json # File maintained by Node.js containing detailed information about dependencies
├── package.json # Project's npm (yarn) configuration file
├── postcss.config.js # Configuration file for PostCSS
├── tailwind.config.js # Configuration file for Tailwind CSS
└── tsconfig.json # File holding the compile settings for TypeScript
コメント