Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

separate folders for client and server? #1374

Closed
pontussalenbo opened this issue Aug 5, 2020 · 28 comments
Closed

separate folders for client and server? #1374

pontussalenbo opened this issue Aug 5, 2020 · 28 comments

Comments

@pontussalenbo
Copy link

❓Question

Hi, I really fancy this project but for large scale applications I prefer to separate the client and the server inside the src folder. I can't quite get the configuration right in the razzle.config.js in order to make it work. I came across this error "Entry module not found: Error: Can't resolve 'C:\Users\Pontu\Desktop\code\TypeScript\razzle-test\src\client'". As you can see, the project is also coded in TypeScript, if that changes anything.
@fivethreeo
Copy link
Collaborator

If you use typescript I recommend the canary release. For setting custom paths I would have to see your razzle.config.js :)

https://github.com/jaredpalmer/razzle/releases/tag/v3.2.0-canary.1

@pontussalenbo
Copy link
Author

I tried having an approach like this comment suggested in another issues like mine. Please see here: #714 (comment). FYI: I added "typescript as a plugin aswell in my config. Other than that I have not tried anything further.

@pontussalenbo
Copy link
Author

How stupid of me, I made a somewhat beginner mistake. As the client.tsx was located in src/client i had to resolve the path to src/client/client as it was not named index.tsx.. I solved it!

@pontussalenbo pontussalenbo reopened this Aug 9, 2020
@pontussalenbo
Copy link
Author

@fivethreeo I tried your recommendation of trying the canary release, but all I get is:
$ tsc -b && razzle build
/mnt/c/Users/Pontu/Downloads/razzle-3.2.0-canary.1/razzle-3.2.0-canary.1/examples/with-typescript/node_modules/razzle/scripts/build.js:10
throw err;
^

ReferenceError: resolve is not defined
at getModules (/mnt/c/Users/Pontu/Downloads/razzle-3.2.0-canary.1/razzle-3.2.0-canary.1/examples/with-typescript/node_modules/razzle/config/modules.js:86:24)
at /mnt/c/Users/Pontu/Downloads/razzle-3.2.0-canary.1/razzle-3.2.0-canary.1/examples/with-typescript/node_modules/razzle/config/createConfigAsync.js:136:27
at new Promise ()
at module.exports (/mnt/c/Users/Pontu/Downloads/razzle-3.2.0-canary.1/razzle-3.2.0-canary.1/examples/with-typescript/node_modules/razzle/config/createConfigAsync.js:71:10)
at /mnt/c/Users/Pontu/Downloads/razzle-3.2.0-canary.1/razzle-3.2.0-canary.1/examples/with-typescript/node_modules/razzle/scripts/build.js:97:30
at new Promise ()
at build (/mnt/c/Users/Pontu/Downloads/razzle-3.2.0-canary.1/razzle-3.2.0-canary.1/examples/with-typescript/node_modules/razzle/scripts/build.js:93:14)
at /mnt/c/Users/Pontu/Downloads/razzle-3.2.0-canary.1/razzle-3.2.0-canary.1/examples/with-typescript/node_modules/razzle/scripts/build.js:52:16

What might I do wrong?

@fivethreeo
Copy link
Collaborator

fivethreeo commented Aug 9, 2020 via email

@fivethreeo
Copy link
Collaborator

Try v3.2.0-canary.2 now :)

@fivethreeo
Copy link
Collaborator

npx create-razzle-app@canary --example with-typescript with-typescript --ignore-existing

@pontussalenbo
Copy link
Author

I can confirm that the new release works. Is it possible for me to enable eslint for linting when building or is the plugin yet not released?

@fivethreeo
Copy link
Collaborator

Not yet released, currently noone is working on it either. Not sure if eslint handles typescript properly either. So that is a no ;)

@pontussalenbo
Copy link
Author

Sorted it out with an extra lint command. TSLint in deprecated so Eslint has plugin for full support of TypeScript. I have one extra question tho as I am slowly learning to razzle. I know that you use hot module reloading but I can't get it to work when using custom paths in razzle config file. I have to manually type rs in the console each time for the server to reload, even though it outputs "server-side HMR enabled" in the console.
I use this approach for modifying entries for server and client, found from a previous issue.
`_'use strict';

// eslint-disable-next-line @typescript-eslint/no-var-requires
const path = require('path');

const defaultOptions = {
server: null,
client: null,
};

function modifyEntryPoints(baseConfig, env, webpack, userOptions = {}) {
const options = { ...defaultOptions, ...userOptions };
const webpackConfig = { ...baseConfig };

const { client, server } = options;
/* This is required to rename the entry points instead of using the defaults */
if (env.target === 'node' && server) {
webpackConfig.entry = [server];
}
if (env.target !== 'node' && client) {
webpackConfig.entry.client = client;
}
return webpackConfig;
}

module.exports = {
plugins: [
{
func: modifyEntryPoints,
options: {
// main server file is index.ts, thus we dont need it as imports default to index files
server: path.join(__dirname, './src/server'),
// need the double client, as the main file is not named index.tsx
client: path.join(__dirname, './src/client/client'),
},
},
],
};
`

@fivethreeo
Copy link
Collaborator

fivethreeo commented Aug 9, 2020 via email

@pontussalenbo
Copy link
Author

@fivethreeo I noticed that a new version of the canary branch was available. May I ask how I setup the razzle config in order to just modify my entry paths for client and server?

@fivethreeo
Copy link
Collaborator

fivethreeo commented Aug 31, 2020 •
edited
Loading

https://github.com/jaredpalmer/razzle/blob/canary/packages/razzle/config/paths.js#L67

// razzle.config.js

const path = require('path');

module.exports = {
  modifyPaths(
    {
      webpackObject, // the imported webpack node module
      options: {
        razzleOptions, // the modified options passed to Razzle in the `options` key in `razzle.config.js` (options: { key: 'value'})
      },
      paths // the default paths that will be used by Razzle.
    }) {

    paths.appServerJs = path.join(paths.appPath, 'src/server');
    paths.appServerIndexJs = path.join(paths.appPath, 'src');
    paths.appClientIndexJs = path.join(paths.appPath, 'src/client');
    return paths;
  },
}

@pontussalenbo
Copy link
Author

Thank you, worked like a charm! Is HMR still broken with custom paths? Or does it require some further configuration?

@fivethreeo
Copy link
Collaborator

Not sure that custom paths is the issue. Will be a new StartServer webpack plugin in razzle 4.0. It is in my github repo aswell so can tweak it myself if I or someone find any issues.

@pontussalenbo
Copy link
Author

I am trying out your canary release 4 and encountered som problem with the newSplitChunks(?).

C:\Users\Pontu\Desktop\code\TypeScript\razzle-canary\node_modules\razzle\config\createConfigAsync.js:101
hash.update(module.libIdent({ context: dir }));
^
ReferenceError: dir is not defined.

Do you want a new issue for this error or? I cant seem to understand what's wrong. I use all experimental features. experimental: {
newBabel: true,
newContentHash: true,
newExternals: true,
newMainFields: true,
newSplitChunks: true,
},

@fivethreeo
Copy link
Collaborator

fivethreeo commented Sep 10, 2020 via email

@pontussalenbo
Copy link
Author

pontussalenbo commented Sep 10, 2020 •
edited
Loading

@fivethreeo Update: It failed due to the @fortawesome/react-fontawesome npm package, is that of any use?

@fivethreeo
Copy link
Collaborator

Attempted a fix now, try canary.5 :)

@pontussalenbo
Copy link
Author

I Can confirm, your fix works. However, it seems to have had an impact on build times, in both dev and production. Is that expected or shall I investigate it further?

@fivethreeo
Copy link
Collaborator

fivethreeo commented Sep 11, 2020 via email

@fivethreeo
Copy link
Collaborator

Can you figure out if it is newBabel og newExternals that slows it down?

@pontussalenbo
Copy link
Author

It was none of them. The problem was my incorrect usage of plugins i razzle.config.js. I used the old way with the plugins array, instead of .modifyWebpackConfig (as output in console, totally my mistake). This combined with treeshake error in fortawesomes svg icons package caused the slow down.

When configured correct, It works like a charm and takes only a few seconds, bundle looks good! (checked with webpack-bundle-analyzer). So it's all good in the new canary.5 :)

@pontussalenbo
Copy link
Author

@fivethreeo I tried migrating to v4.0.0-finch.2 and encountered some problems.

When running yarn build or yarn start:
Error: Cannot find module 'mini-css-extract-plugin'
When running yarn test
Error: Cannot find module 'razzle-dev-utils/logger'

Is seems like mini-css-extract-plugin is missing from the package.json file. For the test I noticed that the logger is a peerDep, so I tried running npx install-peerdeps razzle@4.0.0-finch.2 but encountered further problems.
TypeError: Cannot read property 'getVersion' of undefined
at Object. (C:\Users\Pontu\Desktop\code\TypeScript\razzle-canary\node_modules\razzle\config\createJestConfig.js:7:48).

Is there anything further that I can try in order to provide you/the team all information needed? Maybe move it to another issue as this issue is not really related to my original issue.

@fivethreeo
Copy link
Collaborator

mini-css-extract-plugin is now a peer dep aswell so you have to provide it

did a new release finch.3 now to fix the other issue :)

@fivethreeo
Copy link
Collaborator

The original issue is solved. Just open new issues as they crop up 😀

@fivethreeo
Copy link
Collaborator

By the way do you have your bundle analyzer setup for razzle? I would like to make it a razzle plugin.

@pontussalenbo
Copy link
Author

I did not do any specific configuration for this issue. I just pushed an instance of the Webpack-bundle-analyzer into the webpackconfig.plugins.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@fivethreeo @pontussalenbo