I created a new React project with create-react-app, but when I use npm run build and open the resulting build in a browser (served from my own express application), I get console errors about unrecognized JSX syntax that wasn't transpiled.
Is it supposed to do this automatically out of the box or is there something else I need to do?
edit: project structure
express-application:
admin (react build output)
admin-src (create-react-app project source folder)
...
app.js
project.json
gulpfile.js
So I use a gulp script to execute npm run build in the admin-src sub-directory, and then it pipes the resulting build out to admin. The admin folder is what the application serves as the client.
Okay I got it working using gulp and gulp-jsx to transpile the resulting build folder before copying it out.
Here is what I came up with:
const gulp = require('gulp');
const jsx = require('gulp-jsx');
gulp.task('build-admin', () => {
gulp.src('admin-src/build/**/*!(.js)')
.pipe(gulp.dest('./admin'));
gulp.src('admin-src/build/**/*.js')
.pipe(jsx({
factory: 'React.createClass'
}))
.pipe(gulp.dest('./admin'));
});
Related
I have a Webpack-templated Vue project, initiated through vue-cli.
I have created a simple 'vue.config.js' file stored in the root folder (where package.json is at) containing the following:
// vue.config.js
module.exports = {
productionSourceMap: false
}
Though when building the project using "npm run build" it ignores it.
I have tried different configurations to check if the problem is with the file or the setting, and the problem is with the file.
I am using webpack#3.12.0, vue#2.6.11, #vue/cli 4.2.3 and npm#6.9.0.
Make sure your build confiuration (in your case the webpack build configs) include your file.
Generally, you will have a source folder (often src) and the builder will build all the files in that dir only. Then you have your destination directory (often dist or build) where your build files will be stored.
Two solutions:
add your conf file to the build source.
move your vue.conf.js file into your source directory
For some reason, I did not manage to get vue.config.js to work.
Alternatively, I edited my webpack config, which as my build files mentioned was located at /config/index.js
Then, I proceeded to pass my build configurations to the build parameter which already appears on the file.
build: {
...
}
And it worked. I assume it may be because I used npm run dev instead of the vue-service-cli, so webpack did not go through the vue.config.js file.
I used Razzle for a server side rendered react app.
Now its time to deploy the application on server. I use IIS as web server. But when i move the build folder to another directory and run node server on it there are errors that i cant find the modules i used in my app, like react.
internal/modules/cjs/loader.js:638
throw err;
^
Error: Cannot find module 'react'
...
Should i move the node_modules folder with build folder? or am i doing something wrong?
Since nobody answered my question. I share what i found out.
Razzle use webpack-node-externals to exclude node_modules on build. (i dont know why)
A simple change in razzle.config.js would fix this.
module.exports = {
modify: (config, { target, dev }, webpack) => {
if (target === "node") {
config.externals = []
}
return config;
},
};
You need to move node_modules along with build folder. Because server.js and bundle files in build folder needs the modules that you have installed. The above error occurs because the server can't found the react module.
I am building a framework, in which I want to have examples folder, like this:
./framework-core
./framework-constants
./framework-helpers
./examples
I want to be able to run the examples with rollup when I download the framework from github, using commands in my package.json such as:
"app0": "rollup examples/app0/app.js --format iife --name 'bundle' --file examples/app0/bundle.js"
In my app0/app.js file I include the framework's main parts, like this:
import { FrameworkClass } from '../../framework-core'
Upon running my app0 command from the cli, I get the following error [!] Error: Could not resolve '../../akira-core' from examples/app0/app.js
I understand this has to do with my relative paths, but am unable to get it working. Is this how it should be done? Is there a smarter way I am missing? Any help is more then welcome.
I would like to bundle a largish node.js cli application into a single .js file.
My code is structured as follows:
|- main.js
|--/lib
|----| <bunch of js files>
|--/util
|----| <bunch of js files>
...etc
I can use browserify to bundle the whole thing into one file using main.js as the entry point, but Browserify assumes the runtime environment is a browser and substitutes its own libraries (e.g. browserify-http for http). So I'm looking for a browserify-for-node command
I tried running
$ browserify -r ./main.js:start --no-builtins --no-browser-field > myapp.js
$ echo "require('start') >> myapp.js
but I'm getting a bunch of errors when I try to run $ node myapp.js.
The idea is that the entire application with all dependencies except the core node dependencies is now in a single source file and can be run using
$ node myapp.js
Update
=============
JMM's answer below works but only on my machine. The bundling still does not capture all dependencies, so when I try to run the file on another machine, I get dependency errors like
ubuntu#ip-172-31-42-188:~$ node myapp.js
fs.js:502
return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
^
Error: ENOENT, no such file or directory '/Users/ruchir/dev/xo/client/node_modules/request/node_modules/form-data/node_modules/mime/types/mime.types'
You can use pkg by Zeit and follow the below steps to do so:
npm i pkg -g
Then in your NodeJS project, in package JSON include the following:
"pkg": {
"scripts": "build/**/*.js",
"assets": "views/**/*"
}
"main": "server.js"
Inside main parameter write the name of the file to be used as the entry point for the package.
After that run the below command in the terminal of the NodeJS project
pkg server.js --target=node12-linux-x64
Or you can remove target parameter from above to build the package for Windows, Linux and Mac.
After the package has been generated you have to give permissions to write:
chmod 777 ./server-linux
And then you can run it in your terminal by
./server-linux
This method will give you can executable file instead of a single .js file
Check out the --node option, and the other more granular options it incorporates.
I can successfully compile my TypeScript project into a single JS file with source maps using something like this:
tsc --sourcemap --out app.js app.ts
I can also successfully minify that output using UglifyJS, while keeping source maps intact:
uglifyjs app.js --source-map app.js.map --in-source-map app.js.map -o app.js
However, I would like to go slightly further. I want to combine my compiled TypeScript code (app.js) with a couple third-party JS libraries into a single minified file that maintains source maps pointing back to the original TypeScript (for my code) or JavaScript (for the third-party libraries).
I tried something like this, basically just adding a JS library file to the input to UglifyJS:
uglifyjs app.js lib/javascript-library.js --source-map app.js.map --in-source-map app.js.map -o app.js
Unfortunately, that doesn't seem to work. It does successfully combine everything into one file, and the source maps for the TypeScript code seem to be preserved. But when I put an error in lib/javascript-library.js, the JS console in my browser (using source maps) says the error is in one of my TypeScript files, which is obviously wrong.
I am a TypeScript newb and I can't imagine I'm the first one to want to combine TS output with random JS libraries in a single minified file with source maps, but I can't find anyone talking about it. So maybe my approach is just completely wrong?
Typescript compiler isn't so smart, to do this you need use more specific tools. Example: gulpjs.
Requirements (if you know gulpjs skip this):
install nodejs
run this: npm install -g typescript gulp to install gulp taskrunner
in project directory, run npm init and follow instruction to create package.json
run: npm install gulp gulp-typescript gulp-concat gulp-uglify gulp-sourcemaps --save-dev to install ts compile, concat, uglify e generate sourcemaps tools
create file with name gulpfile.js
Define 'compile' task in gulpfile.js :
var gulp = require('gulp');
var ts = require('gulp-typescript');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');
gulp.task('compile', function() {
var tsResult = gulp.src('app.ts')
.pipe(sourcemaps.init()) // This means sourcemaps will be generated
.pipe(ts({
sortOutput: true,
// ...
}));
return tsResult
.pipe(concat('lib/js-library.js')) // You can use other plugins that also support gulp-sourcemaps
.pipe(uglify())
.pipe(sourcemaps.write()) // Now the sourcemaps are added to the .js file
.pipe(gulp.dest('release/'));
});
And now, run gulp compile and see the magic!
Learn this packages and build your custom task compile.