Ready for deployment
This commit is contained in:
Ben Grant
parent
76a36ed35f
commit
f9c216ad00
12
README.md
12
README.md
|
|
@ -1,4 +1,4 @@
|
|||
# Crabfit
|
||||
# Crabfit <img width="100" align="right" src="crabfit-frontend/src/res/logo.svg" alt="avatar">
|
||||
|
||||
Align your schedules to find the perfect time that works for everyone.
|
||||
|
||||
|
|
@ -8,3 +8,13 @@ Align your schedules to find the perfect time that works for everyone.
|
|||
2. Run `yarn` in both folders.
|
||||
3. Run `node index.js` in the backend folder to start the API.
|
||||
4. Run `yarn start` in the frontend folder to start the front end.
|
||||
|
||||
## Deploy
|
||||
|
||||
### Frontend
|
||||
1. In the frontend folder `cd crabfit-frontend`
|
||||
2. Run `./deploy.sh` to compile and deploy.
|
||||
|
||||
### Backend
|
||||
1. Deploy the backend `cd crabfit-backend && gcloud app deploy --project=crabfit`
|
||||
2. Deploy the endpoints service `cd crabfit-backend && gcloud endpoints services deploy swagger.yaml`
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ const datastore = new Datastore({
|
|||
});
|
||||
|
||||
app.use(cors({
|
||||
origin: 'http://localhost:3000',
|
||||
origin: process.env.NODE_ENV === 'production' ? 'https://crab.fit' : 'http://localhost:3000',
|
||||
}));
|
||||
app.use(express.json());
|
||||
app.use((req, res, next) => {
|
||||
|
|
|
|||
|
|
@ -1,23 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#F79E00" />
|
||||
<meta charset="utf-8">
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
|
||||
<meta name="theme-color" content="#F79E00">
|
||||
<meta
|
||||
name="keywords"
|
||||
content="crab, fit, crabfit, schedule, availability, availabilities, when2meet, doodle, meet, plan, time, timezone"
|
||||
>
|
||||
<meta
|
||||
name="description"
|
||||
content="Crab Fit your schedules together to find a time that works for everyone!"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
content="Enter your availability to find a time that works for everyone!"
|
||||
>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png">
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
|
||||
|
||||
<link rel="stylesheet" href="%PUBLIC_URL%/index.css" />
|
||||
<meta property="og:title" content="Crab Fit">
|
||||
<meta property="og:description" content="Enter your availability to find a time that works for everyone!">
|
||||
<meta property="og:url" content="https://crab.fit">
|
||||
|
||||
<link rel="stylesheet" href="%PUBLIC_URL%/index.css">
|
||||
|
||||
<title>Crab Fit</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>Crab Fit doesn't work without Javascript. Enable it or try a different browser.</noscript>
|
||||
<noscript><h1>🦀 Crab Fit doesn't work without Javascript 🏋️</h1><p>Enable Javascript or try a different browser.<p></noscript>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ const App = () => {
|
|||
return (
|
||||
<BrowserRouter>
|
||||
<ThemeProvider theme={theme[isDark ? 'dark' : 'light']}>
|
||||
<button onClick={() => setIsDark(!isDark)} style={{ position: 'absolute', top: 0, left: 0 }}>{isDark ? 'dark' : 'light'}</button>
|
||||
{process.env.NODE_ENV !== 'production' && <button onClick={() => setIsDark(!isDark)} style={{ position: 'absolute', top: 0, left: 0 }}>{isDark ? 'dark' : 'light'}</button>}
|
||||
<Global
|
||||
styles={theme => ({
|
||||
html: {
|
||||
|
|
@ -38,6 +38,25 @@ const App = () => {
|
|||
a: {
|
||||
color: theme.primary,
|
||||
},
|
||||
'*::-webkit-scrollbar': {
|
||||
width: 16,
|
||||
height: 16,
|
||||
},
|
||||
'*::-webkit-scrollbar-track': {
|
||||
background: `${theme.primaryBackground}`,
|
||||
},
|
||||
'*::-webkit-scrollbar-thumb': {
|
||||
borderRadius: 100,
|
||||
border: `4px solid ${theme.primaryBackground}`,
|
||||
width: 12,
|
||||
background: `${theme.primaryLight}AA`,
|
||||
},
|
||||
'*::-webkit-scrollbar-thumb:hover': {
|
||||
background: `${theme.primaryLight}CC`,
|
||||
},
|
||||
'*::-webkit-scrollbar-thumb:active': {
|
||||
background: `${theme.primaryLight}`,
|
||||
},
|
||||
})}
|
||||
/>
|
||||
<Switch>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ const SelectField = ({
|
|||
id,
|
||||
options = [],
|
||||
inline = false,
|
||||
defaultOption,
|
||||
register,
|
||||
...props
|
||||
}) => (
|
||||
|
|
@ -23,7 +24,7 @@ const SelectField = ({
|
|||
ref={register}
|
||||
{...props}
|
||||
>
|
||||
<option value="">Select...</option>
|
||||
{defaultOption && <option value="">{defaultOption}</option>}
|
||||
{options.map((value, i) =>
|
||||
<option key={i} value={value}>{value}</option>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -68,10 +68,10 @@ const Event = (props) => {
|
|||
|
||||
setEvent(response.data);
|
||||
document.title = `${response.data.name} | Crab Fit`;
|
||||
setIsLoading(false);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
//TODO: 404
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -249,6 +249,8 @@ const Event = (props) => {
|
|||
<Center style={{ textDecoration: 'underline', fontSize: 14, paddingTop: 6 }}>Create your own</Center>
|
||||
</Link>
|
||||
|
||||
{(!!event || isLoading) ? (
|
||||
<>
|
||||
<EventName isLoading={isLoading}>{event?.name}</EventName>
|
||||
<ShareInfo>https://crab.fit/{id}</ShareInfo>
|
||||
<ShareInfo isLoading={isLoading}>
|
||||
|
|
@ -256,8 +258,17 @@ const Event = (props) => {
|
|||
<>Copy the link to this page, or share via <a href={`mailto:?subject=${encodeURIComponent(`Scheduling ${event?.name}`)}&body=${encodeURIComponent(`Visit this link to enter your availabilities: https://crab.fit/${id}`)}`}>email</a>.</>
|
||||
}
|
||||
</ShareInfo>
|
||||
</>
|
||||
) : (
|
||||
<div style={{ margin: '100px 0' }}>
|
||||
<EventName>Event not found</EventName>
|
||||
<ShareInfo>Check that the url you entered is correct.</ShareInfo>
|
||||
</div>
|
||||
)}
|
||||
</StyledMain>
|
||||
|
||||
{(!!event || isLoading) && (
|
||||
<>
|
||||
<LoginSection id="login">
|
||||
<StyledMain>
|
||||
{user ? (
|
||||
|
|
@ -381,6 +392,8 @@ const Event = (props) => {
|
|||
/>
|
||||
</section>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
<Footer id="donate">
|
||||
<span>Thank you for using Crab Fit. If you like it, consider donating.</span>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ export const Title = styled.span`
|
|||
display: block;
|
||||
font-size: 2rem;
|
||||
color: ${props => props.theme.primary};
|
||||
font-family: 'Molot';
|
||||
font-family: 'Molot', sans-serif;
|
||||
font-weight: 400;
|
||||
text-shadow: 0 2px 0 ${props => props.theme.primaryDark};
|
||||
line-height: 1em;
|
||||
|
|
|
|||
|
|
@ -69,6 +69,7 @@ const Home = () => {
|
|||
};
|
||||
|
||||
fetch();
|
||||
document.title = 'Crab Fit';
|
||||
}, []);
|
||||
|
||||
const onSubmit = async data => {
|
||||
|
|
@ -176,6 +177,7 @@ const Home = () => {
|
|||
register={register}
|
||||
options={timezones}
|
||||
required
|
||||
defaultOption="Select..."
|
||||
/>
|
||||
|
||||
{error && (
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export const TitleSmall = styled.span`
|
|||
margin: 0;
|
||||
font-size: 3rem;
|
||||
text-align: center;
|
||||
font-family: 'Samurai Bob';
|
||||
font-family: 'Samurai Bob', sans-serif;
|
||||
font-weight: 400;
|
||||
color: ${props => props.theme.primaryDark};
|
||||
line-height: 1em;
|
||||
|
|
@ -25,7 +25,7 @@ export const TitleLarge = styled.h1`
|
|||
font-size: 4rem;
|
||||
text-align: center;
|
||||
color: ${props => props.theme.primary};
|
||||
font-family: 'Molot';
|
||||
font-family: 'Molot', sans-serif;
|
||||
font-weight: 400;
|
||||
text-shadow: 0 4px 0 ${props => props.theme.primaryDark};
|
||||
line-height: 1em;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import axios from 'axios';
|
||||
|
||||
export const instance = axios.create({
|
||||
baseURL: 'http://localhost:8080',
|
||||
baseURL: process.env.NODE_ENV === 'production' ? 'https://api-dot-crabfit.uc.r.appspot.com' : 'http://localhost:8080',
|
||||
timeout: 1000 * 300,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
|
|
|
|||
Loading…
Reference in a new issue