Preact guide says
To alias any package in webpack, you need to add the resolve.alias section to your config. Depending on the configuration you're using, this section may already be present, but missing the aliases for Preact.
But using any of the official templates (default, typescript, material web components, etc...) doesn't generate any webpack.config.js file and preact has no eject command like react to access the full project configuration.
So, few things:
Firstly, Preact and Preact-CLI are two separate items.
You're quoting the section from our docs labeled "Integrating into an existing pipeline". This means adding Preact to an existing React application of yours, but, if you're using one of our templates, then this is a new project, not an existing one.
preact has no eject command like react to access the full project configuration.
There is no way to "eject" React. What you're referring to is the build tool called "Create React App".
We do allow for full configuration of the Webpack config with a preact.config.js. With this, you can edit any parts of the config that you'd like: change plugin options, add loaders, remove plugins, etc., without owning the configuration yourself. You can just comment out your changes in your config and you're back to the default config.
We believe CRA's "eject" is a poor API and therefore don't match it.
Related
Before I start, I just want to mention I'm studying and learning to use a proper workflow with git, vue, express, npm, cli and webpack. I'm very new to these concepts but have been enjoying learning and troubleshooting this as I go along. I've been watching a popular video tutorial (I'll link if it is ok) on using VueJS with Express. In the past I've been just a standard html/php, javascript/jquery, css dev with no cli tools. I decided to dive head first after seeing how amazing these tools are and having that 'AHA' moment while using them.
I finished the first part of the tutorial which was setting up node, npm, etc... I created a git repository (here https://github.com/drpcken/tab_tracker), made my first commit (wow that was fun) and started going through the tutorial after getting all my dependencies configured and using nodemon and eslint in the terminal to see issues.
Now my project has it's main project folder, and then a client and server subfolder that separates my frontend (vue) and backend (express). The tutorial had me setup eslint using the standard style guide. I quickly realized I didn't want this since standard doesn't require semicolons at the end of each line (I'm old fashioned and preferred them). I then realized that the linting I wanted was airbnb. So last night, while working in my server folder I ran the command to init my eslint: node ./node_modules/eslint/bin/eslint.js --init and changed the style guide to airbnb. It worked beautifully, and I happily committed my changed to my repository this morning.
When I woke up and started studying again this morning, it dawned on me that my client folder also needed to have the eslint initialized and switched to airbnb style guide. So I did so, the same way I initlaized eslint on my server folder. However, it seems that it didn't take. If I add a semicolon to the end of one of my js files in the client folder, my compiler/terminal complains:
✘ http://eslint.org/docs/rules/semi Extra semicolon
src/router/index.js:2:32
import Router from 'vue-router';
I have no clue why this would happen. I configured eslint to use airbnb the same way as my server folder. Here is a link to my repo: https://github.com/drpcken/tab_tracker
In short: switching from standard style guide to airbnb lints differently in one folder than the other. server folder lints properly with airbnb (requiring semicolon) but my client folder, using the same airbnb linting does not (gives an error when I add semicolons).
Your server side code uses require whereas your client side code does it using import. So yeah, you cannot actually compare the validity of the same amongst both of them.
If you have the look at the documentation here ( which you may trace from the link above the error snippet you shared ), you may realize this : It is not the airbnb style guide but the eslint default rule for ASI ( aka automatic semicolon insertion) . You may wish to remove the influence of the same from your code.
Addendum : As Fabio Antunes just commented, you may wish to remove the eslint-standard from your package.json. Let us know if that helps.
I have nodejs project with react frontend part, and I want to use babel for backend server (to have import / export, and some additional features like 'decorators', object-rest-spread etc)
Also I want to use babel for react frontend project but with different set of presets / plugins.
On the backend I have latest (8.2) nodejs so it's already know classes, async/await etc which shouldn't be transpiled.
But at frontend I'm targeting IE11 so I have to enable a lot of plugins.
So if I have single .babelrc config for frontend and backend I'm getting overtranspiled backend code.
I know there is an 'env' option for babel config but in describe case I have same 'env'.
For now I'm ended with two configs:
one in package.json and one inside of webpack.config (babel-loader options).
However I don't like result because its may confuse new developers.
He can found babel config inside of package.json and think that this is the only config, trying to add / modify something and struggling why it doesn't affect frontend part.
There is also some problems with such setup:
Jest can't read babel settings from webpack.config so I have to define additional "env": "test" in .babelrc just for jest.
And this lead to unnecessary transpiling backend during tests.
That's the way I've approached the problem in my projects. It's best to keep the two separate, and perhaps be explicit about which one you're using in a given context. You are targeting two very different environments, and it makes sense to have two different configuration files. Where you building an webview version from the same codebase, you'd have a separate config for that as well. And so on for each "environment" you'd have.
It might pose problems for newer developers, but I'd argue that having if (is_in_client_mode) ? 'one_config_value' : 'another_config_value' spread around is just as bad, without the benefits of having two files.
We are trying to build a 'pluginisable' Java webapp which use vue.js on client-side.
General description
Let say we want to get the following server-side application simplified architecture without NodeJs in production (and using Java and Osgi but it doesn't really matter here in my opinion, it may be PHP, .Net or wathever) :
A main webapp which exposes, among others : vuejs2, router and some general dependencies (bootstrap, jQuery etc...) on the client-side,
Many webapp plugins which expose, among others : additional and/or optional vue.js components and third party dependencies.
What we want
The webapp does the work to check for available webapp plugins on server-side and then expose the appropriate JS files in the index file. For example :
app.js : the main webapp loader and general dependencies,
pluginA.js : the vue.js components provided by the server-side plugin "A",
pluginB.js : the vue.js components provided by the server-side plugin "B".
The entire webapp is not build through nodejs but each of the 3 examples are built separately using node and webpack.
Constraints
How can we achieve a build process for the plugins following these constraints :
we want to avoid the javascript build process to have to conciliate all parts of the application at the same time : Checked, we have 1 embedded vue app per webapp plugin, Maven runs the node build process for each webapp plugin and the server-side already does the job to expose all of the 3 files separately,
the plugin JS files only contain the built vue components and 3rd-party dependencies that they want to provide : Not checked, all of the 3 output folders contains all the JS dependencies.
Line of thought
For each webapp plugin, we think we need to find a way to build all .vue files of a webapp plugin and exclude all other dependencies from the output file. As we are new to the node and vuejs world, how could we achieve this ?
Thanks for your help.
You may want to try code splitting:
Code splitting is the idea that a bundle [a .js file with all your Vue.js code bundled together] can be fragmented into smaller files allowing the user to only download what code they need, when they need it.
(...)
The key to code splitting a Vue.js app is async components. These are components where the component definition (including its template, data, methods etc) is loaded asynchronously.
(...)
We’ll need Webpack’s help to dynamically load [components]. (...) Webpack has an implementation [of an] import() [method] and treats it as a code split point, putting the requested module into a separate file when the bundle is created.
Source: Code Splitting With Vue.js And Webpack, a very helpful guide for implementing code splitting.
Below is the main.js code that the author of the guide ends up with to dynamically load a component. If I read the guide correctly, this change in the way you register a component is the only change necessary to implement code splitting. No changes are necessary in your Webpack config.
new Vue({
el: '#app',
components: {
ExampleAsyncComponent: () => import('./ExampleAsyncComponent.vue') /* This is the changed part. */
}
});
When I use generator-angular-fullstack's API to build routes, controllers, directives, whathaveyou, it appends naming conventions I don't like. For instance for all the module declarations it appends "App", and I'd prefer to not have "App" appended to my app name. Also, it uses "Ctrl" instead of "Controller", and so on.
I'm not seeing a json file that controls this behavior in my app or my angular-fullstack npm files. There's a good chance I'm overlooking something or not even looking in the right place.
Thanks!
You cannot edit the templates directly. You can either go back and rename them, or generate your own templates by replacing the routing through your .yo-rc.json file. It's located in the root folder of the project in all angular-fullstack apps unless removed.
It looks like angular-fullstack uses the generator-ng-component node module for the templates, here's a link to the github repo for controller template specifically. You could also make your own, fork it, then use it as your own generator.
https://github.com/DaftMonk/generator-ng-component/blob/master/templates/controller/name.controller.js
I have successfully created a few loopback projects using
slc lb project *myproject*
command but now I have a pre-existing node project that I would like to use loopback in.
Is there a recommended best practice around the migration to loopback?
Is it just a matter of including the relevant module references in my package.json and running npm install? Or do also need to make some changes to my app.js?
Will I need to manually create the models.json and datasources.json?
Any insignts appreciated.
Edit: I added the relevant loopback modules to my package.json, replaced my express requires with loopback, manually added a datasources.json, and models.json and it all seems to have worked.
The only remaining issue is that when I bring up my explorer view the shell comes up but no api endpoints even though I have models defined in my models.json file.
Edit: I added the relevant loopback modules to my package.json, replaced my express requires with loopback, manulally added a datasources.json, and models.json and it all seems to have worked.
The only remaining issue is that when I bring up my explorer view the shell comes up but no api end points even though I have models defined in my models.json file.
To load and process models.json and datasources.json, you have to "boot" your LoopBack application.
Assuming you have installed loopback 2.x in your project, and you want to use the old 1.x project layout scaffolded by slc lb, here are the instructions:
Install loopback-boot 1.x. Make sure you are not using 2.x or newer, as 2.x changed the project layout.
npm install --save loopback-boot#1.x
Modify your main application file (e.g. app.js) and add the following lines:
// at the top
var boot = require('loopback-boot');
// after you have created `app` object
// and configured any request-preprocessing middleware
boot(app, __dirname);
Please consider using the new 2.x project layout, see Migrating apps to version 2.0 for information on how to migrate your "models.json" into the new format.
Is there a recommended best practice around the migration to loopback?
I suggest scaffolding a new app using slc loopback and moving your old apps files to the relevant directories.
is it just a matter of including the relveant module references in my package.json and running npm install or do also need to make some changes to my app.js?
This will be part of the migration process, you will also need to configure app.js to meet your needs (like setting up middleware, etc)
will I need to manually create the models.json and datasources.json?
No, when you scaffold the app using slc loopback, they will be automatically generated in the new project.
The only remaining issue is that when I bring up my explorer view the shell comes up but no api end points even though I have models defined in my models.json file.
Did you create the files in commmon/models manually? Try creating them through slc loopback:model and the tool will add the configurations in server/model-config.json for you.