Please help with my below questions:
"npm" is the one which comes when we install Node.js. Am I correct?
"create-react-app" package installs/loads the Babel & Webpack which are required for our React project. Am I correct?
When will the React code gets compiled & Translated? Does the below points are correct?
a. After creating React project and developing some code, we are loading our application in browser by running the "npm start" command. So while running this command, will the Babel is going to compile the React code and convert it to JavaScript code which has ES5 standards? Does this conversion to ES5 happens when we run the "npm start" command?
b. Also I learned that Webpack is going to merge all various files within the React project to a single .js file. So does this merging of all the different files by Webpack will be performed when we run "npm start" command?
So if my above understanding is correct, the React code will be Compiled, Translated & Merged into a single file when we run "npm start" command. Correct?
npm start is really just a command that exists in the package.json which can be configured to do whatever you please. It is typically use to kick off all things needed to "start" the app. In the context of a react app created using create-react-app the start command will call react-scripts start and that points to a file called react-scripts which sits in your node_modules/.bin. If you want to see everything that happens you can read through that file.
In short tho, you are correct that it will use babel to transpile the code to something the browser understands, it will use webpoack to create one bundle file (or multiple if you are using code splitting). It will also start a webpack dev server which will usually listen on port 3000 and it will open your default browser to your app. These default settings can be overwritten in the package.json.
Hope this gives you some clarity.
Related
I'm using VueJS and Nuxt to build myself a website. I have encountered a new problem.
When I run npm run build and then npm run start everything works fine. Everything is loaded and ready. Everyone is getting a /dist folder when they run npm run build but I did not. I guess I don't need it if npm run start works just fine without it.
Just checked that I have no index.html in my project but how does then the npm run start work?
When I upload the built website to my Bluehost. It only shows me the folder list and not a running website. I should npm run start from bluehost? I have no idea what to do next. The image is below.
Is npm run generate the only normal way to upload a website?
First thing .. npm run start/build/dev etc are just NPM scripts that are specified in the package.json under the scripts section. They can be anything, but according to Nuxt docs this is the default:
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"generate": "nuxt generate",
"start": "nuxt start"
}
So that's what's actually running when you doing those.
That said, I think where you are getting confused is that there's two ways to host these projects. As a server, or as a static site.
When you are running it locally you are running it as a server and that's why you can browse to localhost in your browser and see what you are working on and that's why there's no index.html.
It's fine to do that and then host it statically though. That's where the building part comes in. Usually webpack compiles everything into a bunch of normal html and other assets that can be read by any browser (without the need of them being actively served (like what your dev server is doing locally).
Try:
Setting target: 'static' in your nuxt.config.js
export default {
target: 'static' // default is 'server'
}
and then run your: (which is actually running nuxt generate)
npm run generate
The other option is to host stuff online as a running server, which you can do on hosting like Heroku or Digital Ocean or AWS .. and you usually make a build script that will set it up and serve it, like how your local dev server was, but online. But often hosting things statically is fine.
Hope that sheds a bit of light on the situation. Write a comment if you still having trouble.
TLDR: both generate and build are fine but they aim at different results.
You'll need to either set target: static or target: server respectively for it to work.
This is an excellent answer that can explain some of the differences and various ways to build your app (npm run build vs npm run generate): https://stackoverflow.com/a/63638062/8816585
Here is an official article of the benefit of target: static.
I'd recommend going full static too, if you can. It will be cheaper and can be served with a CDN easily (like on Netlify), hence more performance and less point of failure.
Of course, there are some exceptions. If your app is password protected with a lot of private content, you may find no benefit into a static build. If it's fine to display the content and you know what it will be ahead of time (like a blog), go static!
PS: you do not see any /dist directory probably because it's ignored in your .gitignore (default when you generate a Nuxt project).
Relevant pages in the documentation:
https://nuxtjs.org/docs/2.x/features/deployment-targets
https://nuxtjs.org/docs/2.x/concepts/static-site-generation
https://nuxtjs.org/docs/2.x/concepts/server-side-rendering
My projects uses a /server folder for my backend code and /react-ui for my client side code. There's a package.json in each folder. I can run test separately in the cmd line, but I would like to run both at the same time. I know about the multi projects feature of jest, but it doesn't seem to work with create-react-app. I'm trying to setup jest with babel as if I was not using create-react-app, but it seems like the wrong approach considering jest is already setup in CRA.
My current setup runs from the /server jest installation. With projects: ['<rootDir>', '<rootDir>/../react-ui']. The jest documentation isn't clear how I could direct it to run npm test in /react-ui
My only goal is to be able to watch both at the same time and I would like to not eject from CRA.
You can have (gulp) scripts on the main level that run each tests separately, but using same configs.
This blog post I found today shows something like this for React. He starts with a node project and then within that he creates a react project in a subfolder. Plus some proxy config stuff.
I wasn't this clever about 10 days ago but here's what I did for Vue.
Created a Vue project
Built it for production
Added a package.json and a server.js in the dist folder created by the Vue build process
The package.json contains these two lines: "postinstall": "npm install express" and "start": "node server.js"
And voilá! Express listens on 8081 internally (but translated to 80/443 by Heroku) and I can get a response in the Vue frontend from the Node backend. So technically it works. But I don't feel it's a nice solution. Kind of messy, smells like desperate hacking and tinkering.
The point is, of course, to avoid having two different Heroku pods for an otherwise small, almost weightless personal project. One for the frontend part and one for the backend.
Can you show me anything better?
You could use a vue-cli project
Then you create a subfolder with your express project and start your script (in package json) like :
npm run vueproject && npm run expressproject
and your both projects will start together.
You have to :
Use a different port for each project.
Install dependencies of the expressproject in the
vueproject package.
Know that's not a good practice to do like this.
I'm trying to "run and autocompile" a mean server whit Angular4 .
I launch server with this command:
ng build && node server.js
which start correctly the express server, but! Every time I make a change on source file it does not compile automatically as this command do(ofc only Angular2)
ng serve
Well I know that ng serve only compile and start Angular2 server but it removes dist folder too !
I followed this tutorial for my server:
https://scotch.io/tutorials/mean-app-with-angular-2-and-the-angular-cli
Thank you!
Andrea
Ok, I solved the problem.
ng serve delete the dist folder on root -> node server.js search it and it fails.
the solution is: run 2 console.
the first is for
ng build --watch
process, which look for changes and recompile it,
the second is
node server.js
Andrea
ng build is for bundle, it is meant to be pre-compiled.
ng serve is for development process, which mean that ng serve create an instance of local development server that monitor your file changes and perform any update for any changes that you've done. So to put it shortly, what you see is working by design or it's intended to do so thus if you want to develop run ng serve; but for production run ng build
I have read several times the documentation provided at :
Node API Babel 6 Docs
I'm starting out learning pg-promise following the Learn by Example tutorial and would prefer to work with ES6 and transpile to ES5 with Babel but am unsure of a few things :
After installing babel-core, what preset do I use and where/how do I configure this to work?
The documentation was unclear to me about which file I put: require("babel-core").transform("code", options); into and what parts of that code are place holders. When I use that code, do I just use it one time somewhere and then I can use ES6 in every other file? How would this be achieved?
I read about this .babelrc file and would like to confirm if the actual filename is ".babelrc" or if that is just the file extension and where in relation to the root directory of my project do I put that file.. and how do I link to it?
If I'm using pg-promise should I be using ES6 and Babel or will running : npm install as described under the Testing section for pg-promise be enough and trying to use ES6 with this create more problems?
I was hoping to take advantage of let and const if the need came up during my server side development.
Is there a standard file structure for a node+babel+pg-promise server setup?
Edit
Worth noting that I have also read Node JS with Babel-Node and saw that using this should be avoided. The final answer at the very bottom didn't really make sense to me for similar reasons I'm having trouble following the actual documentation provided by Babel.
1.a What Preset is needed?
You will need to install Babel firstly with npm install babel-core --save-dev in the root directory of your project using a Terminal window like Command Prompt.
Once installed, you will need to install the es2015 preset with npm install babel-preset-es2015 --save-dev. Babel-Core is Promises/A+ Compliant but not ideal for usage due to poor error handling so a library such as Bluebird should be used instead for this purpose. In order to transpile, babel-core will still need to be installed and es2015 enables ES6->ES5 transpiling so you can use fancy things like let and const etc.
1.b Where to put require("babel-core");?
instead, use require("babel-core/register"); and place it inside your Entry file typically called, "server.js". The server.js file will need to use CommonJS (ES5) exclusively.
By using the "require" statement it will apply all relevant transforms to all code being required into the Entry file and all files being required/included into those files.
You point to the Entry file inside package.json under the "main": section.
Package.json is created when you initialise the project with npm init at the root directory of your project inside the Terminal Window
One approach to this would be :
Entry File - server.js
server.js - requires {babel-core and the main ES6 file : config.js/jsx/es6/es}
config.es6 - uses ES6 and has includes(requires) for all other project files that can also use ES6 as they get transpiled by being loaded into the "config" file which is being directly transpiled by babel-core.
2. What is .babelrc?
.babelrc is the filename and should be placed in the same folder as your package.json file (normally the root directory) and will automatically "load" when babel-core is required to determine which preset(s) or plugins are to be used.
Inside .babelrc , you will need to add the following code :
{
"presets": ["es2015"]
}
3. pg-promise Testing Section
A direct quote from the developer recently answered this
You do not need to worry about steps in the Tests, use only the steps in the install. The one in tests relates to the dev dependency installation, in order to run tests. The pg-promise can work with any promise library compliant with Promises/A+ spec.
4. Standard File/Folder Structure for Server Side Projects?
There is no standard way to achieve this task as each project has unique demands. A good starting point would be to place the Entry file in the project root directory, the ES6 Config file in a "scripts" or "src" sub-folder and individual components in folders below that.
e.g.
ROOT/server.js
ROOT/src/config.es6
ROOT/src/component1/files.es6
ROOT/src/component2/files.es6
With this in place, Babel will successfully transpile all ES6 to ES5 and enable support of A+ compliant promises.
To begin using the node.js webserver This Guide provides a bit more insight and in the context of this answer the code shown would be placed into the ES6 config.es6 file and the following code would go into the Entry server.js file :
require("babel-core/register");
require("./src/config.es6");
The process for building Isomorphic web applications is different to this and would likely use things like grunt, gulp, webpack, babel-loader etc another example of which can be Found Here.
This answer is the combination of several key points provided by other answers to this question as well as contributions from experienced developers and my own personal research and testing. Thank you to all who assisted in the production of this answer.
This answer uses this simple directory structure
project/server/src/index.js => your server file
project/server/dist/ => where babel will put your transpiled file
Install babel dependencies
npm install -g babel nodemon
npm install --save-dev babel-core babel-preset-es2015
Add these npm scripts to your package.json file
"scripts": {
"compile": "babel server/src --out-dir server/dist",
"server": "nodemon server/dist/index.js
}
Create a .babelrc file in your project root directory
{
"presets": "es2015"
}
Transpile your directory with
npm run compile
Run your server with
npm run server
I think you should use a tool like grunt or gulp to manage all your "build" tasks. It will automate it for you, and you won't make errors.
In one command, you can transpile your code into babel ES2015 et start your application.
I suggest you to take a look at this simple project. (just install node_modules and launch npm start to start the app.js file)
However, if you really want to use babel manually,
.babelrc is the name of the file, you can see one in this project (redux) to have an example
.babelrc is a config file, if you want to see how it works, you can check this package.json (always redux)
There's actually no standard way that I know. You can use the project skeleton below if needed, and send pull request to improve it :-)
#makeitsimple
Step: 1
npm install nodemon --save
In project directory
Step: 2
yarn add babel-cli
yarn add babel-preset-es2015
Step: 2
In package.json-> scipts change 'start' to the following
start: "nodemon src/server.js --exec babel-node --presets es2015"
Step: 3
yarn start