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 - Bootstrap
- Newsletter - Mailchimp
- Contact Form - Formspree
- Analytics - Google Analytics
- Hosting - Vercel
Styles
You can edit Bootstrap 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 Bootstrap elements with custom style check the Bootstrap 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>
);
}undefined
undefined
Deployment
Install the Vercel CLI
npm install -g vercel
Add each variable from .env to your Vercel project with the following command. You'll be prompted to enter its value and then choose one or more environments (development, preview, or production).
Learn more here.
vercel env add VARIABLE_NAME
Run this command to deploy a preview (for testing a live deployment)
vercel
Run this command to deploy to production
vercel --prod
See the Vercel docs for more details.
Other
The Create React App documention covers many other topics. This project was initially created using Divjoy, a React codebase generator. Feel free to ask questions in the Divjoy forum and we'll do our best to help you out.