First, make sure you have set up the nodes repository and that its ./dockerDev.sh script is running.
Then, run yarn start in this repository and visit http://localhost:3000.
Note: nodes-web by default assumes nodes is in a sibling directory. See details on this in the Building section
Note: If running for the first time, you may have to wait until the dockerDev.sh script shows desci_nodes_backend | Server running on port 5420.
Login with your email (or noreply@desci.com) and input the verification code logged in the dockerDev.sh output:
Simulating email to noreply@desci.com token: 123456Run yarn build to build the project or yarn start to run the devserver.
The dependency on nodes (desci-models and desci-contracts) is managed by the Makefile. Building this project will make sure the nodes repo is built as well, which may take a while the first time. The @desci-labs/desci-models package is linked to node_modules as part of the build process. This alone is not enough to actually run the backend cluster; see the nodes README.me for details on doing that.
To reset the repository state, i.e. wiping dependencies, artifacts, and unlinking local packages:
make cleannodes locationIf building against a nodes repo that is not in a sibling directory, set the NODES_DIR environment variable. This can be done inline:
NODES_DIR=path/to/nodes yarn start
NODES_DIR=path/to/nodes make...or by exporting the variable:
export NODES_DIR=path/to/nodes
yarn startTo work on the frontend standalone, without depending on any local dependencies, you can use these commands:
yarn start:standalone
yarn build:standaloneThis project uses create-react-app and is not ejected. Webpack config is handled by CRACO.
This project uses Webpack v5 under the hood
We Use Atomic Design
The attempt here is to avoid hard to navigate component hierarchies. When we group components by Feature, it tends to result in lots of cross-Feature references, removing the benefit of grouping by Feature.
When we group by complexity, it allows us to mentally map where a component may be based on its size. As a project grows it's harder to remember what Feature a reusable component belongs to, but it's easier to remember how complex the component is.
Briefly: Keep all components flat as possible in hierarchy. Do not nest components. If a component is 1-time use, just leave it in the same file as the consuming component. If it becomes reusable later, we will move it out into its own file.
Group by complexity into: atoms, molecules, organisms, screens
// Turn this
const Styled = styled(div)`
cursor: pointer;
margin-right: 5px;
border-bottom: 1px solid #000;`;
<Styled />
// into this
<div className="cursor-pointer mr-5 border-black border-b" />
// plus, there's lots of premade components: https://tailwindui.com/VS Code Users: Install Tailwind Intellisense
Change the VSCode settings to support Tailwind Styled Components -- How to change VSCode settings?
"tailwindCSS.includeLanguages": {
"typescript": "javascript", // if you are using typescript
"typescriptreact": "javascript" // if you are using typescript with react
},
"editor.quickSuggestions": {
"strings": true // forces VS Code to trigger completions when editing "string" content
},
"tailwindCSS.experimental.classRegex": [
"tw`([^`]*)", // tw`...`
"tw\\.[^`]+`([^`]*)`", // tw.xxx<xxx>`...`
"tw\\(.*?\\).*?`([^`]*)" // tw(Component)<xxx>`...`
]Look at icons.ts to see how we import customizable SVGs (supporting stroke, fill etc)
// usage
import { IconResearchObject } from "icons";
// ...
return <IconResearchObject fill="red" />;Note: If fill / stroke are not working, double check the asset is imported as SVG and that the SVG doesn't override fill / stroke inside its markup. If so, remove fill/stroke overrides inside the paths.
Note: Many icons are from Nucleo icon pack, but some are custom. We attempt to standardize in @images/icons folder
We define shortcuts for importing in tsconfig.extend.json
This lets you do stuff like
import MyComponent from "@components/atoms/Button";instead of
import MyComponent from "../../../components/atoms/Button";Note: I sometimes get a VS Code / typescript error when importing certain aliases, still investigating
Guide: Know how to use React memo to prevent unnecessary re-renders
Debug if bundle is big or first loads are slow
yarn build
yarn analyzedevelop are pushed to Staging Serveryarn build ; serve -s build works locallyrecord keeping in case webpack issues arise such as "require not defined" or "process not defined" in the browser console Notes: