Install dependencies
npm install
Update your .env
file with values for each environment variable
API_KEY=AIzaSyBkkFF0XhNZeWuDmOfEhsgdfX1VBG7WTas
etc ...
Install the Vercel CLI
npm install -g vercel
Link codebase to a Vercel project and run development server
vercel dev
When the above command completes you'll be able to view your website at http://localhost:3000
.
Note: You can run just the front-end with npm run start
, but vercel dev
also handles running your API endpoints (located in the /api
directory).
This project uses the following libraries and services:
- Framework - Create React App with React Router
- UI Kit - Bulma
- Authentication - Auth0
- Database - Cloud Firestore
- Payments - Stripe
- Newsletter - Mailchimp
- Contact Form - Airtable
- Analytics - Google Analytics
- Hosting - Vercel
Styles
You can edit Bulma SASS variables in the global stylesheet located at src/styles/global.scss
. Variables allow you to control global styles (like colors and fonts), as well as element specific styles (like button padding). Before overriding Bulma elements with custom style check the Bulma docs to see if you can do what need by tweaking a SASS variable.
Custom styles are located in their related component's directory. For example, if any custom style is applied to the Navbar component you'll find it in src/components/Navbar.scss
. We ensure custom styles are scoped to their component by prepending the classname with the component name (such as .Navbar__brand
). This ensures styles never affect elements in other components. If styles need to be re-used in multiple components consider creating a new component that encapsulates that style and structure and using that component in multiple places.
Routing
This project uses React Router and includes a convenient useRouter
hook (located in src/util/router.js
) that wraps React Router and gives all the route methods and data you need.
import { Link, useRouter } from './../util/router.js';
function MyComponent(){
// Get the router object
const router = useRouter();
// Get value from query string (?postId=123) or route param (/:postId)
console.log(router.query.postId);
// Get current pathname
console.log(router.pathname)
// Navigate with the <Link> component or with router.push()
return (
<div>
<Link to="/about">About</Link>
<button onClick={(e) => router.push('/about')}>About</button>
</div>
);
}
Authentication
This project uses Auth0 and includes a convenient useAuth
hook (located in src/util/auth.js
) that wraps Auth0 and gives you common authentication methods. Depending on your needs you may want to edit this file and expose more Auth0 functionality.
import { useAuth } from './../util/auth.js';
function MyComponent(){
// Get the auth object in any component
const auth = useAuth();
// Depending on auth state show signin or signout button
// auth.user will either be an object, null when loading, or false if signed out
return (
<div>
{auth.user ? (
<button onClick={(e) => auth.signout()}>Signout</button>
) : (
<button onClick={(e) => auth.signin('hello@divjoy.com', 'yolo')}>Signin</button>
)}
</div>
);
}
Database
This project uses Cloud Firestore and includes some data fetching hooks to get you started (located in src/util/db.js
). You'll want to edit that file and add any additional query hooks you need for your project.
import { useAuth } from './../util/auth.js';
import { useItemsByOwner } from './../util/db.js';
import ItemsList from './ItemsList.js';
function ItemsPage(){
const auth = useAuth();
// Fetch items by owner
// Returned status value will be "idle" if we're waiting on
// the uid value or "loading" if the query is executing.
const uid = auth.user ? auth.user.uid : undefined;
const { data: items, status } = useItemsByOwner(uid);
// Once we have items data render ItemsList component
return (
<div>
{(status === "idle" || status === "loading") ? (
<span>One moment please</span>
) : (
<ItemsList data={items}>
)}
</div>
);
}
Deployment
Install the Vercel CLI
npm install -g vercel
Add each variable from your .env
file to your Vercel project, including the ones prefixed with "REACT_APP_". You'll be prompted to enter its value and choose one or more environments (development, preview, or production). See Vercel Environment Variables to learn more about how this works, how to update values through the Vercel UI, and how to use secrets for extra security.
vercel env add plain VARIABLE_NAME
Run this command to deploy to a unique preview URL. Your "preview" environment variables will be used.
vercel
Run this command to deploy to your production domain. Your "production" environment variables will be used.
vercel --prod
See Vercel Deployments for more details.
Other
This project was created using Divjoy, the React codebase generator. You can find more info in the Divjoy Docs.