I have a webpack react project. It runs only webpack, but I want to remove the webpack related matter and run as a normal react project.
webpack is just a bundler. It bundles all your js files and dump that as string in eval function in one single js file.
I Got your question now. I guess, you mean that you have a react project. Its developed now. And you want only the usefule files now, right? If thats the case, you need only two files(primarily for the project). First you build the project with whatever script you have, I guess, npm run build.
Post that, you will see a dist folder at the root.
Inside that dist folder you will find one index.html file and index.js file. Besides this you may want css and assets folder.
Does that answers your concern?
Related
i created a create-react-app and want to use filetypes like webp or mp3.
When i run my application on localhost via npm run start everything works fine, but after my deployment on my server (which uses npm run build and delivers the build folder) it doesn't load filetypes like mp3 or webp anymore. Why is this happening? i think its any simple configuration in react or anything like that, but i cant solve this problem by my own. Thanks for your help.
The issue may be with typescript (if that is what you're using). Typescript will convert .ts and .tsx files to .js, but not move most other files over to build. If they are in a separate assets directory, you have to ensure that gets deployed too. If this is the issue, you have a few choices.
You can manually move the files over to build as a 'post' deploy step (using say, a shell script).
You can use a bundler like webpack to help you maintain the references to those other assets and bundle them correctly.
I finally found the problem that caused this behaviour. Amazon AWS Amplify creates a rewrite rule for single page applications (SPA). You can find this setting under Rewrites and redirects in your Amplify application settings. There you will find a rewrite rule with following source address:
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>
...change it to...
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json|mp3)$)([^.]+$)/>
... for example, to allow mp3 files. This is also important to allow webp-Images or woff2-Fonts.
I understand that in react you cannot import files outside src folder.
But what is the reason for it exactly and can I disable it?
In my project react web app is only part of the whole thing, and different parts share some files (configs, build output), so folder structure looks like this
ProjectRoot/
config
build-output/
Part1/
Part2/
WebApp/
src/
...
Sure, you can copy files or create symlinks, but that's duplication and inconvenient.
This is a restriction of Create React App only.
This tool exists to get new users up and running with the react framework as fast as possible by abstracting away the tooling. The part of tooling that is limiting you in this instance is their webpack configuration, which is preset to only look for javascript files in your src directory.
That explains the why? but to answer the other half of your question:
how can I disable it?
Is that you would need to eject from Create React App and then modify your webpack config to allow it to search directories other than src/
First - this has nothing to do with react itself.
If you refer to importing javascript modules (for now using module loaders like systemjs, require, etc.) then the answer is:
It depends what directory is being served by web server. If you have set up your web server to serve WebApp/src folder only - then no, browser will not be able to get access to the files outside and so module loaders. If you will serve all ProjectRoot directory - then yes, you can.
If you prepare your web application for deployment using some sort of bundlers (webpack, browserify) - it depends on how you will configure them and instruct to include the required files in the resulting bundle.
I'm trying to create a custom UI plugin in TypeScript
Here's the steps I'm taking
create a plugin project in a local folder
write .ts files for custom UI in the plugin project root
generate .js files out of those .ts files with tsc command in the plugin project root
go to the test NativeScript project and run tns plugin add <local plugin path> to include the created plugin
But I get compiling errors at step 3 because I have importing statements as follows
import { ContentView } from "ui/content-view";
import...
I referenced an example here https://github.com/NathanWalker/nativescript-cardview/blob/master/cardview.ios.ts
My question is how cardview.ios.ts in the example 'nativescript-cardview' is being compiled to cardview.io.js? It seems impossible to do this...
In the plugin, you have referenced the author has created a demo app and is using the declaration file for tns-core-modules from that demo. Look at this line where tns-core-modules.d.ts is included in tsconfig.json
You can follow this practice for testing cases and for your release you can create a relative path to the tns-core-modules (and references) declaration files from the app node_modules folder like done here
As a side note noEmiOnError flag in your package.json will allow the translation to continue without hanging on errors.
Thanks for linking to your repo. NativeScript's docs state that "if you are using a transpiler, make sure to include the transpiled JavaScript files in your plugin".
Your package.json specifies cardview.js as the entrypoint, but your transpiled JavaScript files haven't been added to the repo. I solved this problem in my nativescript-midi plugin by committing the transpiled files in a \dist directory. The plugin is written in ES 6 but transpiled to ES 5 for consumption. To make sure that the src and dist directories remain in sync, I use a git pre-commit hook that automatically runs the build command and commits the results. If you clone the nativescript-midi repo, you can view it in .git/hooks/pre-commit . A benefit of using this approach for your plugin is that it will also allow it to be used by developers who are not using TypeScript.
I'm trying to use webpack with my angular-meteor application. Unfortunately the meteor build fails with the following error:
While determining active plugins:
error: conflict: two packages included in the app (pbastowski:angular-babel and webpack:webpack) are both trying to handle *.js
The angular-meteor package has a dependency on pbastowski:angular-babel for ES2015 support, while webpack uses the babel-loader. Any idea how I can avoid this conflict?
This is a Meteor message that will appear when two Meteor packages try to add a Meteor compiler plugin for the same file extension, in this case ".js".
Option 1
Remove webpack:webpack from your project. Do you really need webpack in your Meteor project? Meteor bundles everything for you, so, there is no need to use webpack, as such. If you want to use ES6 modules then consider using pbastowski:systemjs.
meteor remove webpack:webpack
I don't know your reasons for using webpack, but I thought I'd mention this option.
Option 2
You can configure pbastowski:angular-babel to not compile ".js" files by adding the line below to babel.json in your Meteor project's root folder. However, if you do this, Babel will only compile ".es6.js" files and not ".js" files.
babel.json
{
"extensions": ["es6.js"]
}
Some people here are trying to say that Webpack is useless but they really don't know much about it.
It can helps you bundle a lot better your assets.
You can bundle better your CSS and even have local CSS (css that is not applied globally but only in a section of your page)
You can do code splitting and not serve your entire app on the first page load
You can have hot-reloading with no page refresh (at least with React ;))
You can use angular and Webpack together without any problem. Here is what you need to do:
meteor remove angular
meteor add angular-meteor-data
meteor add angular-templates
The only missing piece then is ng-annotate and luckily, there is a few ways. You can use the ng-annotate-loader or ng-annotate-webpack-plugin in your Webpack config file.
i am trying trying to create a project with webpack, angular and gulp. Webpack creates a bundle file called build.js and an index.html from a template. When the browser enters the webpage i want it to go directly to a login screen by using ui-route.
this is how my directory structure looks like.
Firstly my problem is that the bundle only includes the entry file, app.module.js. I can require the other js files in app.module.js to have them in the bundle to but when this project grows it will be a lot of files to be required in one file. So is it possible to bundle all js files except the once in node_modules folder?
My next problem is that when the build.js and index.html has been created in the dist/build folder i cant seem to find the rest of the html files in the project if they are not in the build folder.
Not sure how your webpack config looks like, but many times the HTML is processed by webpack and might end up in your JS bundle (as a string) that then can be used by Angular.