The ssr-sample from hiroppy

Dependency Dashboard

This issue provides visibility into Renovate updates and their statuses. Learn more

Rate Limited

These updates are currently rate limited. Click on a checkbox below to force their creation now.

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

fix(deps): update dependency styled-components to v5 (styled-components, @types/styled-components)

Other Branches

These updates are pending. To force PRs open, click the checkbox below.

chore(deps): update dependency glob-parent to 5.1.2 [security]
chore(deps): update dependency npm-registry-fetch to 4.0.5 [security]
chore(deps): update dependency nth-check to 2.0.1 [security]
chore(deps): update dependency set-value to 4.0.1 [security]
chore(deps): update dependency trim to 0.0.3 [security]

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Check this box to trigger a request for Renovate to run again on this repository

connected-react-router doesn't work

Stop using ts-node in production

First of all, Sorry for bad English.

This repository is very helpful for react ssr with styled component, typescript, NodeJS express framework. My company use this stack (including NextJS).
We are looking for boilerplate implementation without NextJS.
This repository can be used part of boilerplate properly.

Here is the thing.
ts-node contributor said, ts-node must not be used in production.
However, your package.json, when npm run start:prod -> server runs using ts-node.
How can I changed it properly?

Here is what I did
change start:prod,
"cross-env NODE_ENV=production npm run start" TO
"cross-env NODE_ENV=production node ./dist/server/index.js"
and "npm run build" -> "npm run build:server" -> "npm run start:prod"

am I right? or something elegance one?

Could we use absolute path on project?

I found we use relative path currently, like below

But TypeScript support absolute path if we change baseURL, rootDir and path

    "rootDir": "src",

    "baseUrl": ".",

    "paths": {
      "*": [
        "src/*"
      ]
    }

It would like

import { createClient } from 'graphql/client';

import { renderFullPage } from '../../renderFullPage';
import { Router } from 'client/Router';
import { configureStore, runSaga } from 'client/store/configureStore';

I tried a lot in this sample, but still not work. Does anyone have any ideas about it?

Typescript compile failure on npm start (loadable component)

@hiroppy

This repo is a great starting point for loadable-components SSR with styled-components, typescript and webpack. I'd love to be able to run the app and see how it works but I'm running into an error on first npm start:

> cross-env TS_NODE_FILES=true ts-node ./src/server/index.ts


/Users/westonm/react-test/ssr-sample/node_modules/ts-node/src/index.ts:245
    return new TSError(diagnosticText, diagnosticCodes)
           ^
TSError: ⨯ Unable to compile TypeScript:
src/client/Router/Routes.ts:4:9 - error TS2322: Type 'Promise<ComponentClass<never, any> | FunctionComponent<never> | DefaultImportedComponent<never> | ConnectedComponentClass<ComponentClass<Props, any>, Pick<Props, "match" | "location" | "history" | "staticContext">>>' is not assignable to type 'Promise<DefaultComponent<Pick<Props, "match" | "location" | "history" | "staticContext">>>'.
  Type 'ComponentClass<never, any> | FunctionComponent<never> | DefaultImportedComponent<never> | ConnectedComponentClass<ComponentClass<Props, any>, Pick<Props, "match" | "location" | "history" | "staticContext">>' is not assignable to type 'DefaultComponent<Pick<Props, "match" | "location" | "history" | "staticContext">>'.
    Type 'ComponentClass<never, any>' is not assignable to type 'DefaultComponent<Pick<Props, "match" | "location" | "history" | "staticContext">>'.
      Type 'ComponentClass<never, any>' is not assignable to type 'ComponentClass<Pick<Props, "match" | "location" | "history" | "staticContext">, any>'.
        Types of property 'getDerivedStateFromProps' are incompatible.
          Type 'GetDerivedStateFromProps<never, any> | undefined' is not assignable to type 'GetDerivedStateFromProps<Pick<Props, "match" | "location" | "history" | "staticContext">, any> | undefined'.
            Type 'GetDerivedStateFromProps<never, any>' is not assignable to type 'GetDerivedStateFromProps<Pick<Props, "match" | "location" | "history" | "staticContext">, any>'.
              Types of parameters 'nextProps' and 'nextProps' are incompatible.
                Type 'Readonly<Pick<Props, "match" | "location" | "history" | "staticContext">>' is not assignable to type 'never'.

4   () => import(/* webpackChunkName: "Orgs" */ '../containers/Orgs').then(({ Orgs }) => Orgs),
          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  node_modules/loadable-components/types/index.d.ts:8:17
    8   getComponent: () => Promise<loadable.DefaultComponent<T>>,
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    The expected type comes from the return type of this signature.
src/client/Router/Routes.ts:11:9 - error TS2322: Type 'Promise<ComponentClass<never, any> | FunctionComponent<never> | DefaultImportedComponent<never> | ConnectedComponentClass<ComponentClass<Props, any>, Pick<Props, never>>>' is not assignable to type 'Promise<DefaultComponent<Pick<Props, never>>>'.
  Type 'ComponentClass<never, any> | FunctionComponent<never> | DefaultImportedComponent<never> | ConnectedComponentClass<ComponentClass<Props, any>, Pick<Props, never>>' is not assignable to type 'DefaultComponent<Pick<Props, never>>'.
    Type 'ComponentClass<never, any>' is not assignable to type 'DefaultComponent<Pick<Props, never>>'.
      Type 'ComponentClass<never, any>' is not assignable to type 'ComponentClass<Pick<Props, never>, any>'.
        Types of property 'getDerivedStateFromProps' are incompatible.
          Type 'GetDerivedStateFromProps<never, any> | undefined' is not assignable to type 'GetDerivedStateFromProps<Pick<Props, never>, any> | undefined'.
            Type 'GetDerivedStateFromProps<never, any>' is not assignable to type 'GetDerivedStateFromProps<Pick<Props, never>, any>'.
              Types of parameters 'nextProps' and 'nextProps' are incompatible.
                Type 'Readonly<Pick<Props, never>>' is not assignable to type 'never'.

11   () => import(/* webpackChunkName: "Top" */ '../containers/Top').then(({ Top }) => Top),
           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  node_modules/loadable-components/types/index.d.ts:8:17
    8   getComponent: () => Promise<loadable.DefaultComponent<T>>,
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    The expected type comes from the return type of this signature.
src/client/Router/Routes.ts:19:5 - error TS2322: Type 'Promise<ComponentClass<never, any> | FunctionComponent<never> | DefaultImportedComponent<never> | ConnectedComponentClass<typeof NotFound, Pick<Props, never>>>' is not assignable to type 'Promise<DefaultComponent<Pick<Props, never>>>'.
  Type 'ComponentClass<never, any> | FunctionComponent<never> | DefaultImportedComponent<never> | ConnectedComponentClass<typeof NotFound, Pick<Props, never>>' is not assignable to type 'DefaultComponent<Pick<Props, never>>'.
    Type 'ComponentClass<never, any>' is not assignable to type 'DefaultComponent<Pick<Props, never>>'.
      Type 'ComponentClass<never, any>' is not assignable to type 'ComponentClass<Pick<Props, never>, any>'.
        Types of property 'getDerivedStateFromProps' are incompatible.
          Type 'GetDerivedStateFromProps<never, any> | undefined' is not assignable to type 'GetDerivedStateFromProps<Pick<Props, never>, any> | undefined'.
            Type 'GetDerivedStateFromProps<never, any>' is not assignable to type 'GetDerivedStateFromProps<Pick<Props, never>, any>'.
              Types of parameters 'nextProps' and 'nextProps' are incompatible.
                Type 'Readonly<Pick<Props, never>>' is not assignable to type 'never'.

19     import(/* webpackChunkName: "404", webpackPrefetch: true */ '../containers/NotFound').then(
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
20       ({ NotFound }) => NotFound
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
21     ),
   ~~~~~

  node_modules/loadable-components/types/index.d.ts:8:17
    8   getComponent: () => Promise<loadable.DefaultComponent<T>>,
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    The expected type comes from the return type of this signature.

    at createTSError (/Users/westonm/react-test/ssr-sample/node_modules/ts-node/src/index.ts:245:12)
    at reportTSError (/Users/westonm/react-test/ssr-sample/node_modules/ts-node/src/index.ts:249:19)
    at getOutput (/Users/westonm/react-test/ssr-sample/node_modules/ts-node/src/index.ts:362:34)
    at Object.compile (/Users/westonm/react-test/ssr-sample/node_modules/ts-node/src/index.ts:395:32)
    at Module.m._compile (/Users/westonm/react-test/ssr-sample/node_modules/ts-node/src/index.ts:473:43)
    at Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Object.require.extensions.(anonymous function) [as .ts] (/Users/westonm/react-test/ssr-sample/node_modules/ts-node/src/index.ts:476:12)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `cross-env TS_NODE_FILES=true ts-node ./src/server/index.ts`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/westonm/.npm/_logs/2019-07-25T23_03_59_726Z-debug.log

I didn't make any changes to the code before running npm i and npm start

Would you apply the latest version of 'loadable-components' to this project?

I'm struggling with the combination of SSR + Code Splitting + Redux Saga.
I appreciate and referred to a few part of your implementation.
Still, I don't know how latest version of loadable-components (https://github.com/smooth-code/loadable-components) can be combined with runSaga and other server related.
perhaps because I do not fully understand how loadable component works with runSaga.

tbh I would like to see your update if you will.

Pls close it if this is not the right place for asking.

How to connect SASS?

Hi!
Nice template!

I have a question about how to connect SASS to your template. As I understand it, you do not have configs for webpack server (only for client), since you use style-component.
Could you help me how it is better to connect SASS?

Page entire refresh on navigating

Hello, this is a great project.

But I'm having a problem, I would like that after the first page load, the navigation would act as SPA instead of each click on links the page in the browser reloads all.

Would you help me?

[Question] How I import images or fonts??

I added image using

        {
            test: /\.(jpe?g|png|gif)$/i,
            loader: 'url-loader?limit=1000&name=images/[hash].[ext]'
        }

declare module '*.png' {
    const value: any;
    export = value;
}

import * as test from '../../assets/test.png';
<img src={test} />

But I had error
Invalid or unexpected token
function (exports, require, module, __filename, __dirname) { .PNG

How I fix this??

Your boilerplate is awesome and best!!

hiroppy / ssr-sample Goto Github PK

ssr-sample's People

Contributors

Stargazers

Watchers

Forkers

ssr-sample's Issues

Rate Limited

Edited/Blocked

Other Branches

Open

Recommend Projects

Recommend Topics

Recommend Org

Jobs