I'm in a jhipster project using both Angular2 and bootstrap 4.
On the jhipster web site, there's a page about how you can customize bootstrap variables, but I can't make this work with realtime changes.
When I put my customized variables in vendor.scss, if I want to see my changes, executing yarn run webpack:build:vendor is not enough, I need to rerun yarn start everytime....
How do I make so my changes are automatically applied ?
You can customize it in the vendor.scss file under the content folder
And make sure you are running the code on
localhost:9000 port.
Related
I have cloned a git repo regarding the swagger framework for API documentations. It is an already built project, ready to run.
However, I would like to effect some styling changes, hide certain elements and tweak with the default links and examples it provides. Indeed the changes have been easy, but by saving them and re-running the project as a web app they were not visible. It is my understanding that one has to rebuild a project in order for changes to come live. It is a React app, running on node.js, so I proceeded by following the script commands within package.json and rebuilt the project.
Still, although the changes have been saved within the dev files, they are not visible within the web app. Inspecting the DOM elements of interest confirms that no changes are in effect. My question is whether I can rebuild this project so that the changes will eventually become available, or if there is another way to achieve this.
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.
Seeking some ideas on how to better improve my teams local development workflow...
We have a Vue CLI shell application project that runs locally via node. Then we have a number of small Vue CLI web-component applications that served up via node.
When the shell is ran it reaches out to each web-component application retrieving a manifest.json file which tells the shell where/when to display the respective web-components.
Our web-component applications are built using something like...
vue-cli-service build --target wc --name foo 'src/components/*.vue'
Having to continuously build the web-component projects after making a code change... debug... and then rebuild again seems cumbersome. This is a new application so at the moment the codebase is in constant flux.
Was hoping someone may have suggestions on how or tools we might use to increase our productivity.
Don't overcomplicate things.
Here's Nuxt.js
As far as I can tell it does everything you want to do straight out of the box. Just set up a basic hello world project with Nuxt and see if it does everything you need it to do for you. It uses Vue.js and Webpack to build the exact same type of application you'd be developing otherwise with Vue, it just has a nicer layout and easier workflow in general. It supports hot reloading on file changes, you'd just run nuxt in the root folder of your project and a local server is started that hot reloads your project whenever you save changes to a file. You then distribute it either as a static application with nuxt generate or build it as a server side rendered application using nuxt build and nuxt start.
I'm trying to debug the back-end of the react - express application. I'm using webpack for bundling.
How to edit configuration on WebStorm so that I could debug both front end and back-end? I'm using WebStorm 2016.
You need to create and start a Node.js run/debug configuration to debug your server-side code and create and start a JavaScript debug configuration for the client-side code.
In the Node.js configuration in the JavaScript file field you need to specify the path to file that kicks off the server.
In the JavaScript configuration in the URL field specify the URL your server is running on. You might also need to configure the mappings between local paths and remote URLs: that's most probably should be between the folder where the component are located and webpack:///. (see this answer for more details).
Also make sure that you have dev-tools: 'source-map' in your Webpack configuration.
Went through some documentations on WebStrom and finally managed to get it working. First select Edit Configurations then a menu will pop up which will allow you to edit Run/Debug Configurations. Click the + button on the left side and add a node js. From that change the Node interpreter from default(local) node_modules to the babel node inside your project dependencies. eg ~/MyWork/Project/node_modules/.bin/babel-node. Then Add --presets=babel-preset-es2015 as Node Parameters. Fill the rest of the configurations and click save and run the project.
Here is an example:
I need to develop a mobile application using worklight. While i was going through few sample source code, I observed a gulpfile where they defined few Task/Watch in it. There was also a package.json where they have defined devDependencies property.
I like to know how a hybrid app project (when developed using Worklight or any other tool/framework) use the gulpfile, package.json, node.js, bowerrc. How is the controls passed across all these components when implemented for a hybrid app developmen and What will be the first point of execution in this sequence of execution workflow. As I believe wlEnvInit() inside main.js is the starting point of execution for a worklight project.
I tried google but could'nt find any explanation on the same.
The Gulp file you see is part of a default Ionic project. It handles compiling Sass files and running the bower install command to install dependancies. If you are using Sass in your project, then this would be useful to you, but it does not directly relate to MobileFirst.
As you know, when you update your common code, you need to do a build/deploy to get the code deployed to your mobile platforms. So if using Sass, then you need to remember that while the Gulp file may compile the CSS, you still need to "mfp bd" to deploy it to MF.
Does this answer your question?