From 690ab42fb875c011a1593827a14e7a64947646aa Mon Sep 17 00:00:00 2001 From: Ashelyn Dawn Date: Mon, 24 Feb 2020 21:24:32 -0700 Subject: [PATCH] Update Next config for better imports --- components/footer/{index.js => footer.js} | 0 components/header/{index.js => header.js} | 0 components/hero/{index.js => hero.js} | 0 index.js | 62 ++++++++++++----------- next.config.js | 38 ++++++++++++-- package-lock.json | 49 ++++++++++++++++++ package.json | 7 +-- pages/_app.js | 7 ++- pages/_document.js | 24 --------- {public => styles}/layout.css | 0 10 files changed, 122 insertions(+), 65 deletions(-) rename components/footer/{index.js => footer.js} (100%) rename components/header/{index.js => header.js} (100%) rename components/hero/{index.js => hero.js} (100%) delete mode 100644 pages/_document.js rename {public => styles}/layout.css (100%) diff --git a/components/footer/index.js b/components/footer/footer.js similarity index 100% rename from components/footer/index.js rename to components/footer/footer.js diff --git a/components/header/index.js b/components/header/header.js similarity index 100% rename from components/header/index.js rename to components/header/header.js diff --git a/components/hero/index.js b/components/hero/hero.js similarity index 100% rename from components/hero/index.js rename to components/hero/hero.js diff --git a/index.js b/index.js index 9556b02..7c8ff6e 100644 --- a/index.js +++ b/index.js @@ -1,30 +1,32 @@ -require('dotenv').config() -const express = require('express') -const nextjs = require('next') -const {promisify} = require('util') - -const dev = process.env.NODE_ENV !== 'production' -const next = nextjs({dev}) -const nextRequestHandler = next.getRequestHandler() -const app = express() -app.listen = promisify(app.listen.bind(app)) - -;(async ()=>{ - - // Allow Next.js to compile its templates - console.log('Preparing Next.js templates . . .') - await next.prepare() - - const app = express() - - app.use('/api', require('./api')) - app.use(nextRequestHandler) - - await app.listen(3000) - - console.log('App listening on port 3000') - -})().catch((ex) => { - console.error(ex.stack) - process.exit(1) -}) +const express = require('express'); +const next = require('next'); + +const port = parseInt(process.env.PORT, 10) || 3000; +const dev = process.env.NODE_ENV !== 'production'; + +// Configure SSR axios defaults +const axios = require('axios') +axios.defaults.baseURL = `http://localhost:${port}` + +// Set up Express +const server = express(); +const app = next({ dev }); +const handle = app.getRequestHandler(); +server.locals.dev = dev + +// API Routes +server.use('/api/', require('./api/')); + +// Let Next.js render pages +server.all('*', (req, res) => { + return handle(req, res); +}); + +// Start server +server.listen(port, err => { + if (err) throw err; + console.log(`> Ready on http://localhost:${port}`); +}); + +// Make sure Next.js gets its crap together +app.prepare(); diff --git a/next.config.js b/next.config.js index 2b152cb..d698132 100644 --- a/next.config.js +++ b/next.config.js @@ -1,8 +1,38 @@ const path = require('path') -module.exports = { - webpack(config, options) { - config.resolve.alias["components"] = path.join(__dirname, 'components'); - return config; +class CustomResolver { + constructor(source, target){ + this.source = source || 'resolve'; + this.target = target || 'resolve'; + } + + apply(resolver) { + const target = resolver.ensureHook(this.target); + resolver + .getHook(this.source) + .tapAsync("CustomResolver", (request, resolveContext, callback) => { + // request.request is the string path we're resolving + // match ~/[dir]/[component] + const match = request.request.match(/^\~\/([^/]*)\/([^/]*)$/) + if(!match) + return callback(); + + // Create a new request, and turn it into + // ./[dir]/[component]/[component].js + const newRequest = { + ...request, + request: path.join(__dirname, match[1], match[2], match[2] + '.js') + } + + resolver.doResolve(target, newRequest, null, resolveContext, callback); + }); } } + +module.exports = { + webpack: (config) => { + config.resolve.plugins.push(new CustomResolver()) + + return config + } +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 2a4486b..ed41dcc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2392,6 +2392,24 @@ "sha.js": "^2.4.8" } }, + "cross-env": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.0.tgz", + "integrity": "sha512-rV6M9ldNgmwP7bx5u6rZsTbYidzwvrwIYZnT08hSGLcQCcggofgFW+sNe7IhA1SRauPS0QuLbbX+wdNtpqE5CQ==", + "requires": { + "cross-spawn": "^7.0.1" + } + }, + "cross-spawn": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.1.tgz", + "integrity": "sha512-u7v4o84SwFpD32Z8IIcPZ6z1/ie24O6RU3RbtL5Y316l3KuHVPx9ItBgWQ6VlfAFnRnTtMUrsQ9MUUTuEZjogg==", + "requires": { + "path-key": "^3.1.0", + "shebang-command": "^2.0.0", + "which": "^2.0.1" + } + }, "crypto-browserify": { "version": "3.12.0", "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz", @@ -3816,6 +3834,11 @@ "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=" }, + "isexe": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", + "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=" + }, "isobject": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz", @@ -4936,6 +4959,11 @@ "resolved": "https://registry.npmjs.org/path-is-inside/-/path-is-inside-1.0.2.tgz", "integrity": "sha1-NlQX3t5EQw0cEa9hAn+s8HS9/FM=" }, + "path-key": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", + "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==" + }, "path-parse": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz", @@ -6276,6 +6304,19 @@ "kind-of": "^6.0.2" } }, + "shebang-command": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", + "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", + "requires": { + "shebang-regex": "^3.0.0" + } + }, + "shebang-regex": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", + "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==" + }, "shell-quote": { "version": "1.7.2", "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.2.tgz", @@ -7914,6 +7955,14 @@ "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz", "integrity": "sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==" }, + "which": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", + "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "requires": { + "isexe": "^2.0.0" + } + }, "wide-align": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz", diff --git a/package.json b/package.json index bc25e7e..5bac7a0 100644 --- a/package.json +++ b/package.json @@ -4,9 +4,9 @@ "description": "", "main": "index.js", "scripts": { - "start": "node index.js", - "dev": "next dev", - "build": "next build" + "dev": "cross-env NODE_ENV=development node index.js", + "build": "next build", + "start": "cross-env NODE_ENV=production node index.js" }, "author": "", "license": "ISC", @@ -15,6 +15,7 @@ "axios": "^0.19.2", "bcrypt": "^3.0.8", "body-parser": "^1.19.0", + "cross-env": "^7.0.0", "debug": "^4.1.1", "dotenv": "^8.2.0", "express": "^4.17.1", diff --git a/pages/_app.js b/pages/_app.js index df4066b..3b24183 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -1,10 +1,9 @@ import React from "react" import PropTypes from "prop-types" -import Header from 'components/header' -import Footer from 'components/footer' -// import "./layout.css" -// import useUserSession from "../hooks/useUserSession"; +import Header from '~/components/header' +import Footer from '~/components/footer' +import "../styles/layout.css" const Layout = ({ Component, pageProps }) => { // Retrieve user information diff --git a/pages/_document.js b/pages/_document.js deleted file mode 100644 index e7860bc..0000000 --- a/pages/_document.js +++ /dev/null @@ -1,24 +0,0 @@ -import Document, { Html, Head, Main, NextScript } from 'next/document' - -class MyDocument extends Document { - static async getInitialProps(ctx) { - const initialProps = await Document.getInitialProps(ctx) - return { ...initialProps } - } - - render() { - return ( - - - - - -
- - - - ) - } -} - -export default MyDocument diff --git a/public/layout.css b/styles/layout.css similarity index 100% rename from public/layout.css rename to styles/layout.css