Update webpack config so that preview server works in prod

Author: catarak

docker-compose-development.yml

@@ -16,6 +16,7 @@ services:
       - /usr/src/app/node_modules
     ports:
       - '8000:8000'
+      - '8002:8002'
     depends_on:
       - mongo
 volumes:

docker-compose.yml

@@ -13,37 +13,42 @@ services:
     # image: index.docker.io/catarak/p5.js-web-editor:latest
     # uncomment the following lines if you don't want export all of the variables
     # defined in your .env file for testing
-    # env_file:
+    env_file:
     #   - "$PWD/.env.production"
-    environment:
-      - API_URL
-      - MONGO_URL
-      - PORT
-      - SESSION_SECRET
-      - AWS_ACCESS_KEY
-      - AWS_SECRET_KEY
-      - S3_BUCKET
-      - AWS_REGION
-      - GITHUB_ID
-      - GITHUB_SECRET
-      - MAILGUN_DOMAIN
-      - MAILGUN_KEY
-      - EMAIL_SENDER
-      - EMAIL_VERIFY_SECRET_TOKEN
-      - S3_BUCKET_URL_BASE
-      - GG_EXAMPLES_USERNAME
-      - GG_EXAMPLES_PASS
-      - GG_EXAMPLES_EMAIL
-      - GOOGLE_ID
-      - GOOGLE_SECRET
-      - EXAMPLE_USER_EMAIL
-      - EXAMPLE_USER_PASSWORD
-      - ML5_EXAMPLES_USERNAME
-      - ML5_EXAMPLES_PASS
-      - ML5_EXAMPLES_EMAIL
-      - UI_ACCESS_TOKEN_ENABLED
-      - UPLOAD_LIMIT
-      - TRANSLATIONS_ENABLED
+      - "$PWD/.env"
+    # environment:
+    #   - API_URL
+    #   - AWS_ACCESS_KEY
+    #   - AWS_REGION
+    #   - AWS_SECRET_KEY
+    #   - EMAIL_SENDER
+    #   - EMAIL_VERIFY_SECRET_TOKEN
+    #   - EXAMPLE_USER_EMAIL
+    #   - EXAMPLE_USER_PASSWORD
+    #   - GG_EXAMPLES_USERNAME
+    #   - GG_EXAMPLES_EMAIL
+    #   - GG_EXAMPLES_PASS
+    #   - GITHUB_ID
+    #   - GITHUB_SECRET
+    #   - GOOGLE_ID
+    #   - GOOGLE_SECRET
+    #   - MAILGUN_DOMAIN
+    #   - MAILGUN_KEY
+    #   - ML5_EXAMPLES_USERNAME
+    #   - ML5_EXAMPLES_EMAIL
+    #   - ML5_EXAMPLES_PASS
+    #   - MOBILE_EMABLED
+    #   - MONGO_URL
+    #   - PORT
+    #   - PREVIEW_PORT
+    #   - EDITOR_URL
+    #   - PREVIEW_URL
+    #   - S3_BUCKET
+    #   - S3_BUCKET_URL_BASE
+    #   - SESSION_SECRET
+    #   - TRANSLATIONS_ENABLED
+    #   - UI_ACCESS_TOKEN_ENABLED
+    #   - UPLOAD_LIMIT
       # you can either set this in your .env or as an environment variables
       # or here YOU CHOOSE
       # - MONGO_URL=mongodb://mongo:27017/p5js-web-editor
@@ -52,6 +57,7 @@ services:
       - /opt/node/app/node_modules
     ports:
       - '8000:8000'
+      - '8002:8002'
     depends_on:
       - mongo
 volumes:

index.js

@@ -1,6 +1,7 @@
 if (process.env.NODE_ENV === 'production') {
   process.env.webpackAssets = JSON.stringify(require('./dist/static/manifest.json'));
   require('./dist/server.bundle.js');
+  require('./dist/previewServer.bundle.js');
 } else {
   let parsed = require('dotenv').config();
   require('@babel/register')({

kubernetes_app.yml

@@ -9,6 +9,18 @@ spec:
     serviceName: web-editor-node
     servicePort: 8000
 ---
+apiVersion: extensions/v1beta1
+kind: Ingress
+metadata:
+  name: preview-editor-ingress
+  annotations:
+    # need to make another global static ip
+    kubernetes.io/ingress.global-static-ip-name: "web-editor-ip"
+spec:
+  backend:
+    serviceName: web-editor-node
+    servicePort: 8002
+---
 apiVersion: v1
 kind: Service
 metadata:
@@ -23,6 +35,8 @@ spec:
   ports:
   - port: 8000
     targetPort: 8000
+  - port: 8002
+    targetPort: 8002
   selector:
     app: web-editor
 ---

server/models/collection.js

@@ -53,4 +53,5 @@ collectionSchema.pre('save', function generateSlug(next) {
   return next();
 });
 
-export default mongoose.model('Collection', collectionSchema);
+export default mongoose.models.Collection ||
+  mongoose.model('Collection', collectionSchema);

server/models/project.js

@@ -93,4 +93,5 @@ projectSchema.methods.isSlugUnique = async function isSlugUnique(cb) {
   }
 };
 
-export default mongoose.model('Project', projectSchema);
+export default mongoose.models.Project ||
+  mongoose.model('Project', projectSchema);

server/models/user.js

@@ -306,4 +306,4 @@ userSchema.statics.EmailConfirmation = EmailConfirmationStates;
 userSchema.index({ username: 1 }, { collation: { locale: 'en', strength: 2 } });
 userSchema.index({ email: 1 }, { collation: { locale: 'en', strength: 2 } });
 
-export default mongoose.model('User', userSchema);
+export default mongoose.models.User || mongoose.model('User', userSchema);

server/views/index.js

@@ -35,7 +35,6 @@ export function renderIndex() {
         window.process.env.MOBILE_ENABLED = ${process.env.MOBILE_ENABLED ? `${process.env.MOBILE_ENABLED}` : undefined};
         window.process.env.TRANSLATIONS_ENABLED = ${process.env.TRANSLATIONS_ENABLED === 'true' ? true : false}; 
         window.process.env.PREVIEW_URL = '${process.env.PREVIEW_URL}';
-        window.process.env.PREVIEW_SCRIPTS_URL = '${process.env.NODE_ENV === 'production' ? `${assetsManifest['/previewScripts.js']}` : '/previewScripts.js'}';
       </script>
     </head>
     <body>

server/views/previewIndex.js

@@ -24,8 +24,12 @@ function renderPreviewIndex() {
         </head>
       <body>
         <div id="root" class="root-app">
-          <script src="/preview-app.js"></script>
         </div>
+        <script src='${
+          process.env.NODE_ENV === 'production'
+            ? `${assetsManifest['/previewApp.js']}`
+            : '/previewApp.js'
+        }'></script>
       </body>
     </html>
   `;

webpack/config.dev.js

@@ -7,8 +7,6 @@ if (process.env.NODE_ENV === 'development') {
   require('dotenv').config();
 }
 
-
-// react hmr being fucked up has to do with the multiple entries!!! cool.
 module.exports = {
   mode: 'development',
   devtool: 'cheap-module-eval-source-map',
@@ -20,7 +18,7 @@ module.exports = {
       'react-hot-loader/patch',
       './client/index.jsx',
     ],
-    'preview-app': [
+    'previewApp': [
       'core-js/modules/es6.promise',
       'core-js/modules/es6.array.iterator',
       'webpack-hot-middleware/client',