From 586c09f257a1f637c77aa57a658ac8a592159365 Mon Sep 17 00:00:00 2001 From: Daniel Puscher Date: Thu, 23 Jan 2020 01:12:35 +0100 Subject: [PATCH 01/32] build: add docker setup and migrate static assets to public/ --- .dockerignore | 5 + .gitignore | 2 +- .nvmrc | 2 +- Dockerfile | 17 + config/express.js | 9 +- docker-compose.yml | 33 + next.config.js | 2 - package.json | 82 +- pages/_app.js | 25 +- pages/_document.js | 10 +- .../static}/android-chrome-192x192.png | Bin .../static}/android-chrome-512x512.png | Bin .../static}/apple-touch-icon.png | Bin {static => public/static}/autotrack.js | 0 {static => public/static}/autotrack.js.map | 0 {static => public/static}/browserconfig.xml | 0 {static => public/static}/favicon-16x16.png | Bin {static => public/static}/favicon-32x32.png | Bin {static => public/static}/favicon.ico | Bin {static => public/static}/ipad_splash.png | Bin {static => public/static}/ipadpro1_splash.png | Bin {static => public/static}/ipadpro2_splash.png | Bin {static => public/static}/ipadpro3_splash.png | Bin {static => public/static}/iphone5_splash.png | Bin {static => public/static}/iphone6_splash.png | Bin .../static}/iphoneplus_splash.png | Bin {static => public/static}/iphonex_splash.png | Bin {static => public/static}/iphonexr_splash.png | Bin .../static}/iphonexsmax_splash.png | Bin {static => public/static}/mstile-150x150.png | Bin .../static}/safari-pinned-tab.svg | 0 {static => public/static}/site.webmanifest | 0 server.js | 6 +- yarn.lock | 8239 +++++++++-------- 34 files changed, 4530 insertions(+), 3902 deletions(-) create mode 100644 .dockerignore create mode 100644 Dockerfile create mode 100644 docker-compose.yml rename {static => public/static}/android-chrome-192x192.png (100%) rename {static => public/static}/android-chrome-512x512.png (100%) rename {static => public/static}/apple-touch-icon.png (100%) rename {static => public/static}/autotrack.js (100%) rename {static => public/static}/autotrack.js.map (100%) rename {static => public/static}/browserconfig.xml (100%) rename {static => public/static}/favicon-16x16.png (100%) rename {static => public/static}/favicon-32x32.png (100%) rename {static => public/static}/favicon.ico (100%) rename {static => public/static}/ipad_splash.png (100%) rename {static => public/static}/ipadpro1_splash.png (100%) rename {static => public/static}/ipadpro2_splash.png (100%) rename {static => public/static}/ipadpro3_splash.png (100%) rename {static => public/static}/iphone5_splash.png (100%) rename {static => public/static}/iphone6_splash.png (100%) rename {static => public/static}/iphoneplus_splash.png (100%) rename {static => public/static}/iphonex_splash.png (100%) rename {static => public/static}/iphonexr_splash.png (100%) rename {static => public/static}/iphonexsmax_splash.png (100%) rename {static => public/static}/mstile-150x150.png (100%) rename {static => public/static}/safari-pinned-tab.svg (100%) rename {static => public/static}/site.webmanifest (100%) diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 0000000..623d94f --- /dev/null +++ b/.dockerignore @@ -0,0 +1,5 @@ +.git +*Dockerfile* +*docker-compose* +node_modules +.next diff --git a/.gitignore b/.gitignore index d4d8fb2..c08d256 100644 --- a/.gitignore +++ b/.gitignore @@ -6,5 +6,5 @@ bundles/ coverage log/ node_modules/ -static/service-worker.js +public/static/service-worker.js yarn-error.log diff --git a/.nvmrc b/.nvmrc index 70324da..cae54a2 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v10.15.1 +v12.14.1 diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..5ff401e --- /dev/null +++ b/Dockerfile @@ -0,0 +1,17 @@ +FROM node:current-alpine + +RUN mkdir -p /usr/src/app +WORKDIR /usr/src/app + +ENV NEXT_TELEMETRY_DISABLED=1 + +COPY package.json yarn.lock ./ +RUN yarn install + +COPY . . + +EXPOSE 3000 + +RUN yarn build + +CMD [ "yarn", "start" ] diff --git a/config/express.js b/config/express.js index c80dd4c..15477fa 100644 --- a/config/express.js +++ b/config/express.js @@ -1,9 +1,9 @@ -const flash = require('connect-flash'); const morgan = require('morgan'); const cookieParser = require('cookie-parser'); const bodyParser = require('body-parser'); const compression = require('compression'); const session = require('express-session'); +const redis = require('redis'); const helmet = require('helmet'); const RedisStore = require('connect-redis')(session); @@ -14,8 +14,12 @@ module.exports = function expressConfig(app, passport, dev = false) { app.use(compression()); app.use(helmet()); + const redisClient = redis.createClient(process.env.REDISCLOUD_URL); + redisClient.unref(); + redisClient.on('error', console.log); + app.use(session({ - store: new RedisStore({ url: process.env.REDISCLOUD_URL }), + store: new RedisStore({ client: redisClient }), secret: process.env.SESSION_SECRET, resave: false, saveUninitialized: true, @@ -28,5 +32,4 @@ module.exports = function expressConfig(app, passport, dev = false) { })); // session secret app.use(passport.initialize()); app.use(passport.session()); // persistent login sessions - app.use(flash()); // use connect-flash for flash messages stored in session }; diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 0000000..f2c8a6f --- /dev/null +++ b/docker-compose.yml @@ -0,0 +1,33 @@ +version: "3" +services: + app: + container_name: app + env_file: .env + environment: + - MONGODB_URI=mongodb://mongodb:27017/codescrobble + - REDISCLOUD_URL=redis://cache:6379 + - NODE_ENV=development + restart: always + build: . + ports: + - "3000:3000" + volumes: + - '.:/usr/src/app/' + depends_on: + - mongodb + - redis + command: ["./docker/wait-for.sh", "mongodb:27017", "--", "yarn", "dev"] + mongodb: + container_name: mongodb + image: mongo + volumes: + - ./data:/data/db/ + ports: + - "27017:27017" + redis: + container_name: cache + image: redis + volumes: + - ./data:/data/db/ + ports: + - "6379:6379" diff --git a/next.config.js b/next.config.js index 141e2ee..a815ef7 100644 --- a/next.config.js +++ b/next.config.js @@ -1,7 +1,6 @@ /* eslint-disable no-param-reassign */ const path = require('path'); const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin'); -const CleanWebpackPlugin = require('clean-webpack-plugin'); const withBundleAnalyzer = require('@zeit/next-bundle-analyzer'); module.exports = withBundleAnalyzer({ @@ -24,7 +23,6 @@ module.exports = withBundleAnalyzer({ webpack: (config, { dev, isServer, buildId }) => { if (!dev) { config.plugins.push( - new CleanWebpackPlugin(), new SWPrecacheWebpackPlugin({ cacheId: 'codescrobble', filepath: path.resolve('./static/service-worker.js'), diff --git a/package.json b/package.json index f06013b..57ec058 100644 --- a/package.json +++ b/package.json @@ -27,66 +27,64 @@ "@zeit/next-bundle-analyzer": "^0.1.2", "babel-plugin-transform-class-properties": "^6.24.1", "body-parser": "^1.19.0", - "clean-webpack-plugin": "^2.0.1", "compression": "^1.7.4", - "connect-flash": "^0.1.1", - "connect-redis": "^3.4.1", + "connect-redis": "^4.0.3", "cookie-parser": "^1.4.4", "disconnect": "^1.2.1", - "dotenv": "^7.0.0", - "express": "^4.16.4", - "express-session": "^1.16.1", - "helmet": "^3.15.1", - "intersection-observer": "^0.6.0", + "dotenv": "^8.2.0", + "express": "^4.17.1", + "express-session": "^1.17.0", + "helmet": "^3.21.2", + "intersection-observer": "^0.7.0", "lastfmapi": "^0.1.1", - "lodash": "^4.17.11", - "mongoose": "^5.5.4", + "lodash": "^4.17.15", + "mongoose": "^5.8.9", "morgan": "^1.9.1", - "next": "^8.1.0", - "next-redux-wrapper": "^3.0.0-alpha.2", + "next": "^9.2.0", + "next-redux-wrapper": "^4.0.1", "nprogress": "^0.2.0", "object-dig": "^0.1.3", - "passport": "^0.4.0", + "passport": "^0.4.1", "passport-lastfm": "^1.0.1", "prop-types": "^15.6.2", "quagga": "^0.12.1", - "react": "^16.8.6", - "react-css-loaders": "^0.0.5", - "react-dom": "^16.8.6", - "react-icons": "^3.6.1", - "react-lazy": "^1.1.0-beta.0", - "react-redux": "^7.0.3", + "react": "^16.12.0", + "react-dom": "^16.12.0", + "react-icons": "^3.8.0", + "react-is": "^16.12.0", + "react-lazy": "^1.1.0", + "react-redux": "^7.1.3", "react-timeago": "^4.4.0", "redis": "^2.8.0", - "redux": "^4.0.1", + "redux": "^4.0.5", "redux-devtools-extension": "^2.13.8", "redux-thunk": "^2.3.0", - "styled-components": "^4.2.0", - "styled-icons": "^7.11.0", + "styled-components": "^5.0.0", + "styled-icons": "^9.2.0", "sw-precache-webpack-plugin": "^0.11.5" }, "devDependencies": { - "@babel/core": "^7.4.4", - "babel-eslint": "^10.0.1", - "babel-jest": "^24.7.1", - "enzyme": "^3.9.0", - "enzyme-adapter-react-16": "^1.12.1", - "eslint": "5.16.0", - "eslint-config-airbnb": "17.1.0", - "eslint-plugin-import": "^2.17.2", - "eslint-plugin-jest": "^22.5.1", - "eslint-plugin-jsx-a11y": "^6.1.1", - "eslint-plugin-react": "^7.11.0", - "jest": "^24.7.1", - "jest-fetch-mock": "^2.1.2", + "@babel/core": "^7.8.3", + "babel-eslint": "^10.0.3", + "babel-jest": "^24.9.0", + "enzyme": "^3.11.0", + "enzyme-adapter-react-16": "^1.15.2", + "eslint": "6.8.0", + "eslint-config-airbnb": "18.0.1", + "eslint-plugin-import": "^2.20.0", + "eslint-plugin-jest": "^23.6.0", + "eslint-plugin-jsx-a11y": "^6.2.3", + "eslint-plugin-react": "^7.18.0", + "jest": "^24.9.0", + "jest-fetch-mock": "^3.0.1", "react-addons-test-utils": "^15.6.2", - "react-test-renderer": "^16.8.6", - "redis-mock": "^0.43.0", - "redux-mock-store": "^1.5.3", - "stylelint": "^10.0.1", - "stylelint-config-property-sort-order-smacss": "^4.0.2", - "stylelint-config-recommended": "^2.2.0", + "react-test-renderer": "^16.12.0", + "redis-mock": "^0.47.0", + "redux-mock-store": "^1.5.4", + "stylelint": "^12.0.0", + "stylelint-config-property-sort-order-smacss": "^5.2.0", + "stylelint-config-recommended": "^3.0.0", "stylelint-config-styled-components": "^0.1.1", - "stylelint-processor-styled-components": "^1.6.0" + "stylelint-processor-styled-components": "^1.9.0" } } diff --git a/pages/_app.js b/pages/_app.js index faae383..a49235f 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -1,31 +1,28 @@ -import App, { Container } from 'next/app'; +import App from 'next/app'; import Head from 'next/head'; import React from 'react'; import withRedux from 'next-redux-wrapper'; import { Provider } from 'react-redux'; +import BaseStyles from '../components/layout/BaseStyles'; +import NProgressStyles from '../styles/nprogress.styles'; import initNProgress from '../lib/initNProgress'; import initializeStore from '../client/reduxStore'; initNProgress(); class MyApp extends App { - static async getInitialProps({ Component, ctx }) { - const pageProps = Component.getInitialProps ? await Component.getInitialProps(ctx) : {}; - return { pageProps }; - } - render() { const { Component, pageProps, store } = this.props; return ( - - - - CodeScrobble ► Easily scrobble VINYL and CD to Last.fm - - - - + + + + + CodeScrobble ► Easily scrobble VINYL and CD to Last.fm + + + ); } } diff --git a/pages/_document.js b/pages/_document.js index 4f0bfb3..6c0adb9 100644 --- a/pages/_document.js +++ b/pages/_document.js @@ -1,7 +1,5 @@ -import Document, { Head, Main, NextScript } from 'next/document'; +import Document, { Html, Head, Main, NextScript } from 'next/document'; import { ServerStyleSheet } from 'styled-components'; -import BaseStyles from '../components/layout/BaseStyles'; -import NProgressStyles from '../styles/nprogress.styles'; import { ANALYTICS_ID } from '../lib/analytics'; const isSafari = userAgent => ( @@ -31,7 +29,7 @@ export default class MyDocument extends Document { render() { return ( - + @@ -68,14 +66,12 @@ export default class MyDocument extends Document { - -