working prototype

index.js

@@ -5,10 +5,12 @@ const app = express();
 const templates = require('./templates');
 const renderer = require('./renderer');
 
+const {getPdfPath} = require('./utils');
+
 app.use(bodyParser.json());
 
-app.options('/generate/pdf/:template', cors());
-app.post('/generate/pdf/:template', cors(), (req, res) => {
+app.options('/pdf/generate/:template', cors());
+app.post('/pdf/generate/:template', cors(), (req, res) => {
 
     const templateName = req.params.template;
     const options = req.body;
@@ -20,19 +22,25 @@ app.post('/generate/pdf/:template', cors(), (req, res) => {
             return;
         }
 
-        renderer(texDocument, (err, pdf) => {
+        renderer(texDocument, (err, pdfFilePath) => {
             if (err) {
                 console.error('Error:', err.code, 'for', req.url);
                 res.sendStatus(500).end('Something went wrong while baking the PDF');
                 return;
             }
-            res.setHeader('Content-Type', 'application/pdf');
-            res.send(pdf);
+            const id = pdfFilePath.replace('/tmp/', '');
+            res.send({id: id});
             res.end();
         });
     });
 });
 
+app.options('/pdf/:id', cors());
+app.get('/pdf/:id', cors(), (req, res) => {
+    const {id} = req.params;
+    res.sendFile(getPdfPath(id));
+});
+
 app.use(express.static('dist'));
 
 app.listen(5000);

package.json

@@ -18,7 +18,8 @@
     "preact": "^7.2.0",
     "preact-compat": "^3.13.1",
     "preact-router": "^2.4.1",
-    "react-pdf": "0.0.10"
+    "react-pdf": "0.0.10",
+    "uuid": "^3.0.1"
   },
   "devDependencies": {
     "babel-core": "^6.23.1",

renderer.js

@@ -1,26 +1,32 @@
 const fs = require('fs');
-const path = require('path');
 const spawn = require('child_process').spawn;
+const uuid = require('uuid');
+
+const {getDirPath, getDocPath} = require('./utils');
+
 
 function copyToTemp(texDocument, callback) {
-    fs.mkdtemp('/tmp/pdfer-', (err, tmpPath) => {
+    const id = uuid.v1();
+    const dirPath = getDirPath(id);
+
+    fs.mkdir(dirPath, (err) => {
         if (err) {
             callback(err);
             return;
         }
 
-        const docPath = path.join(tmpPath, 'doc.tex');
+        const docPath = getDocPath(id);
         fs.writeFile(docPath, texDocument, (err) => {
             if (err) {
                 callback(err);
             }
-            callback(null, docPath);
+            callback(null, id);
         });
     });
 }
 
-function generateDoc(docPath, callback) {
-    const pdflatex = spawn('pdflatex', [docPath, '-interaction', 'nonstopmode'], {cwd: path.dirname(docPath)});
+function generateDoc(id, callback) {
+    const pdflatex = spawn('pdflatex', [getDocPath(id), '-interaction', 'nonstopmode'], {cwd: getDirPath(id)});
     pdflatex.stderr.on('data', (data) => {
         console.error('onData', data);
     });
@@ -31,19 +37,12 @@ function generateDoc(docPath, callback) {
             return;
         }
         console.log('PDF generated');
-        const pdfFilePath = docPath.replace('.tex', '.pdf');
-        fs.readFile(pdfFilePath, (err, data) => {
-            if (err) {
-                callback(err);
-                return;
-            }
-            callback(null, data);
-        });
+        callback(null, id);
     });
 }
 
 module.exports = (texDocument, callback) => {
-    copyToTemp(texDocument, (err, docPath) => {
-        generateDoc(docPath, callback);
+    copyToTemp(texDocument, (err, id) => {
+        generateDoc(id, callback);
     });
 };

utils.js

@@ -0,0 +1,19 @@
+const path = require('path');
+
+function getDirPath(id) {
+    return `/tmp/pdfer-${id}`;
+}
+
+function getDocPath(id) {
+    return path.join(getDirPath(id), 'doc.tex');
+}
+
+function getPdfPath(id) {
+    return path.join(getDirPath(id), 'doc.pdf');
+}
+
+module.exports = {
+    getDirPath,
+    getDocPath,
+    getPdfPath
+};

webapp/index.html

@@ -10,6 +10,7 @@
             <div id="app">Loading</div>
         </div>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.2/fetch.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/1.7.300/pdf.min.js"></script>
+        <script src="/libs/pdf.js"></script>
+        <script src="/libs/pdf.worker.js"></script>
     </body>
 </html>

webapp/views/components/Preview.js

@@ -3,11 +3,15 @@ import PDF from 'react-pdf';
 
 class Preview extends Component {
     render(props) {
+        if (!props.pdfUrl) {
+            return '';
+        }
+
         return (
             <PDF
-                content={props.pdf}
-                onDocumentComplete={this._onDocumentComplete}
-                onPageComplete={this._onPageComplete}
+                file={props.pdfUrl}
+                onDocumentComplete={this._onDocumentComplete.bind(this)}
+                onPageComplete={this._onPageComplete.bind(this)}
             />
         );
     }

webapp/views/pages/Home.js

@@ -5,7 +5,7 @@ import Input from '../components/Input';
 import Button from '../components/Button';
 import Preview from '../components/Preview';
 
-function arrayBufferToBase64(arrayBuffer) {
+function toBase64(arrayBuffer) {
     return btoa(String.fromCharCode(...new Uint8Array(arrayBuffer)));
 }
 
@@ -20,7 +20,7 @@ class Home extends Component {
                     value={props.subject}
                 />
                 <Button onClick={this._onGenerate.bind(this)} text="Generiere"/>
-                <Preview pdf={this.state.pdf} />
+                <Preview pdfUrl={this.state.pdfUrl} />
             </div>
         );
     }
@@ -36,7 +36,7 @@ class Home extends Component {
     _onGenerate(name, event){
         var component = this;
 
-        fetch('http://localhost:5000/generate/pdf/brief', {
+        fetch('//localhost:5000/pdf/generate/brief', {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -47,14 +47,15 @@ class Home extends Component {
                 console.log('request failed');
                 return;
             }
-            return res.arrayBuffer();
-        }).then(function(arrayBuffer) {
+            return res.json();
+        }).then(function(data) {
+            const {id} = data;
             component.setState({
-                pdf: arrayBufferToBase64(arrayBuffer)
+                pdfUrl: `//localhost:5000/pdf/${id}`
             });
         }).catch(function(error) {
             component.setState({
-                pdf: null
+                pdfUrl: null
             })
         });
     }