Bug/35 Make production changes (#36)

.github/workflows/pipeline.yml

@@ -85,7 +85,8 @@ jobs:
         heroku config:set CLOUDINARY_API_SECRET=${{ secrets.CLOUDINARY_API_SECRET }} -a instaclone
         heroku config:set CLOUDINARY_API_KEY=${{ secrets.CLOUDINARY_API_KEY }} -a instaclone
         heroku config:set CLOUDINARY_NAME=${{ secrets.CLOUDINARY_NAME }} -a instaclone
-        heroku config:set PROD_MONGODB_URI=${{ secrets.PROD_MONGODB_URI }} -a instaclone
+        heroku config:set PROD_MONGODB_URI="${{ secrets.PROD_MONGODB_URI }}" -a instaclone
+        heroku config:set REACT_APP_SOCKET_URL="${{ secrets.REACT_APP_SOCKET_URL }}" -a instaclone
     - name: Build and push
       env:
         HEROKU_API_KEY: ${{ secrets.HEROKU_API_KEY }}

Dockerfile

@@ -1,6 +1,6 @@
 # BUILD STAGE
 
-FROM node:16 as build-stage
+FROM node:20 as build-stage
 WORKDIR /app
 
 # copying the all the frontend and backend code
@@ -19,7 +19,7 @@ RUN cd backend && npm run tsc
 
 # RUN STAGE
 
-FROM node:16 as run-stage
+FROM node:20 as run-stage
 WORKDIR /app
 
 # copying the built frontend and backend code
@@ -31,6 +31,9 @@ COPY --from=build-stage /app/backend/package.json /app
 # Installing the backend dependencies
 RUN npm install --omit=dev
 
+# Set NODE_ENV to production
+ENV NODE_ENV=production
+
 EXPOSE 3001
 
 CMD ["node", "index.js"]

backend/package.json

@@ -7,12 +7,13 @@
     "tsc": "tsc -p tsconfig.build.json",
     "ts-jest:init": "npx ts-jest config:init",
     "test": "cross-env NODE_ENV=test jest --verbose --detectOpenHandles",
-    "start": "cross-env NODE_ENV=production node build/src/index.js",
+    "start": "cross-env NODE_ENV=production node build/index.js",
     "dev": "cross-env NODE_ENV=development nodemon --files src/index.ts",
     "start:test": "cross-env NODE_ENV=test ts-node --files src/index.ts",
     "start:cypress-test": "cross-env NODE_ENV=cypress ts-node --files src/index.ts",
     "start:dev": "cross-env NODE_ENV=development ts-node --files src/index.ts",
     "docker:mongo": "docker-compose -f docker-compose.dev.yml up -d",
+    "docker:instaclone": "docker run --env-file .env -p 3001:3001 instaclone",
     "lint": "eslint .",
     "build:ui": "rm -rf build && cd ../frontend && npm run build && mv build ../backend"
   },

backend/src/app.ts

@@ -14,6 +14,11 @@ import notificationRouter from './routes/notifications';
 import { errorHandler, logErrorCodes } from './utils/middleware';
 
 const { NODE_ENV } = process.env;
+
+if (!NODE_ENV || !['production', 'development', 'cypress', 'test'].includes(NODE_ENV)) {
+  throw new Error('The NODE_ENV environment variable is not set to "production", "development", "cypress", or "test".');
+}
+
 const app = express();
 
 if (NODE_ENV === 'production' || NODE_ENV === 'development') {
@@ -40,7 +45,7 @@ app.get('/health', (_req, res) => {
 
 app.use(cookieParser());
 app.use(cors());
-app.use(express.static('build'));
+app.use(express.static(NODE_ENV === 'production' ? __dirname : 'build'));
 app.use(express.json({ limit: '50mb' }));
 app.use(express.urlencoded({ limit: '50mb', extended: true }));
 app.use(morgan('dev'));
@@ -51,7 +56,7 @@ app.use('/api/auth', authRouter);
 app.use('/api/likes', likeRouter);
 app.use('/api/notifications', notificationRouter);
 
-if (NODE_ENV === ('production' || 'development')) {
+if (NODE_ENV === 'production' || NODE_ENV === 'development') {
   app.get('*', (_req, res) => {
     const prodPath = path.join(__dirname, 'index.html');
     const devPath = path.join(__dirname, '..', 'build', 'index.html');

frontend/cypress/integration/auth-flow.spec.ts

@@ -108,6 +108,26 @@ describe('signup view', () => {
     cy.get('[data-testid="homepage-container"]').should('be.visible');
   });
 
+  it('user can view their profile after signup', () => {
+    const user1 = Cypress.env('user1');
+
+    cy.get('input[name="email"]').type(user1.email);
+    cy.get('input[name="username"]').type(user1.username);
+    cy.get('input[name="password"]').type(user1.password);
+    cy.get('input[name="fullName"]').type(user1.fullName);
+
+    cy.get('button[type="submit"]').click();
+
+    cy.get('[data-testid="homepage-container"]').should('be.visible');
+
+    cy.get('[data-testid="usermenu"]').click();
+    cy.contains(/profile/i).click();
+
+    cy.url().should('include', `/${user1.username}`);
+    cy.contains(user1.fullName).should('be.visible');
+    cy.contains(/edit profile/i).should('be.visible');
+  });
+
   it('logs in the user after signup', () => {
     const user1 = Cypress.env('user1');
 

frontend/src/features/users/SignUp.tsx

@@ -10,7 +10,7 @@ import {
 import { Link, useNavigate } from 'react-router-dom';
 import SignUpLogInTextInput from '../../common/components/SignUpLogInTextInput/SignUpLogInTextInput';
 import { NewUserFields } from '../../app/types';
-import { useAddUserMutation } from '../../app/apiSlice';
+import { useAddUserMutation, usePrefetch } from '../../app/apiSlice';
 import useAuth from '../../common/hooks/useAuth';
 import FormContainer from '../../common/components/FormContainer';
 import Button from '../../common/components/Button';
@@ -20,7 +20,8 @@ import getErrorMessage from '../../common/utils/getErrorMessage';
 function SignUp() {
   const [errorMessage, setErrorMessage] = useState('');
   const [addUser] = useAddUserMutation();
-  const [, { login }] = useAuth();
+  const [, { login, refreshAccessToken }] = useAuth();
+  const prefetchUsers = usePrefetch('getUsers', { force: true });
   const { classes } = useStyles();
   const navigate = useNavigate();
 
@@ -42,6 +43,8 @@ function SignUp() {
               username: values.username,
               password: values.password,
             });
+            await refreshAccessToken();
+            prefetchUsers();
             navigate('/');
           } catch (error) {
             const message = getErrorMessage(error);