This is the first time I have used a frontend Build Tool. In the past I have never used any type of a framework that was more complicated to install than just adding a <script> tag to the top of my html page. Now you know my level of knowledge.
I have a vue.js/vuetify application with directory structure like this:
I think it started with the vuetify/webpack advanced template.
And I am trying to export the project into something that I can put online. I have in my head that somehow I can run some type of a command that will generate all my code into .html, .css, and .js files that I could then hook up to any sort of backend that I wanted.
If my assumption is correct, and that's how things are done, then how is routing handled? Is the entire site just in one html file?
I think webpack is supposed to do this maybe? However when I try to run webpack from the command line, I get command not found.
If my assumption is wrong, then how do I get this online?
Use the npm run build command. You can see what the command does inside the package.json file, scripts object.
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
}
Your entire site will be compiled into the index.html file and the build.js file located in the /dist folder. Both the /dist folder and the build.js are generated when you run the npm run build command. Make sure the script src inside of index.html is pointing to your build.js file.
Related
I setup a basic web app in VS Code. I want to copy the html file to the out dir whenever it changes. My folder structure looks like this:
src
css
_Index.scss
global.scss
html
index.html
scripts
index.ts
In my package.json I included the following scripts to automatically compile TypeScript and SASS files:
"watch:tsc": "tsc --watch",
"watch:sass": "sass --watch --sourcemap=none src:out",
"watch": "concurrently --kill-others \"npm run watch:sass\" \"npm run watch:tsc\""
A tsconfig.json handles the TypeScript compilation. This is all working fine.
What do I need to setup to also copy the html file to the out dir? Simply including a copy statement feels wrong. Maybe at some point I'd like to include images as well, I wouldn't want to adjust the copy statement for every new file type would I?
I feel like I'm missing some super basic stuff here.
I created my app using create-react-app, and I use npm run build to build the production package.
I need to put the app on different clients' sites, each client put the app on a different sub-folder.
e.g.
client A: https://clientA.com/myApp
client B: https://clientB.com/UAT/myApp
client C: https://clientC.com/webApps/myApp
everytime when I build the package, for different sub-folders, I need to modify the homepage value in package.json, build the package and repeat this steps mulltiple times.
My manual steps like:
modify "homepage": "myApp" > npm run build > save the build folder for deployment
modify "homepage": "/UAT/myApp" > npm run build > save the build folder for deployment
modify "homepage": "/webApps/myApp" > npm run build > save the build folder for deployment
keep repeatly doing the above.....
how can I improve this situation? how can I do build once to fit all different paths?
such as, can I use a variable in homepage value and set it up in environment variable?
or, can I write a script to do some? I hope to simpify this compile steps, ideally to execute the build or a building script once.
Thanks for any help or suggestion.
You can use PUBLIC_URL environment variable when making build. The build command looks like:
PUBLIC_URL=https://clientA.com/myApp npm run build
You can create npm scripts to simplify it like:
{
...
"scripts": {
"build-clientA": "PUBLIC_URL=https://clientA.com/myApp react-scripts build",
"build-clientB": "PUBLIC_URL=https://clientB.com/UAT/myApp react-scripts build",
}
...
}
If you want to do one command to build for all of clients, simple bash script to build and move build folder should work fine, it looks like:
PUBLIC_URL=https://clientA.com/myApp react-scripts build && mv build clientA
PUBLIC_URL=https://clientB.com/UAT/myApp react-scripts build && mv build clientB
You can just set homepage to . if you're using CRA 9.0 or newer:
If you are not using the HTML5 pushState history API or not using client-side routing at all, it is unnecessary to specify the URL from which your app will be served. Instead, you can put this in your package.json:
"homepage": ".",
This will make sure that all the asset paths are relative to index.html. You will then be able to move your app from http://mywebsite.com to http://mywebsite.com/relativepath or even http://mywebsite.com/relative/path without having to rebuild it.
– the documentation
You can simply build it once, and then use vim or any text editor to do the following operation on index.html: Replace ="/ with ="/myApp/ and ="/UAT/myApp/ and =/webApps/myApp/ in the three folders respectively.
You can also use the sed utility to do that. Or maybe even automate it using a bash script.
It does work perfectly with Hash router
you can set homepage like this :
"homepage": "/"
and build project once and handle this server side and read all routes from index.html
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.
Right now I have a package.json scripts section that looks like this:
"scripts": {
"views": "cp -r ./src/views/ ./dist/views/",
"dev": "tsc-watch --onSuccess \"./run.sh\"",
"prod": "./run.sh",
"test": "jest --coverage --verbose"
}
Inside run.sh I have:
npm run views && node ./dist/server.js
When I run npm run dev I expect it to compile .ts files within ./src/ to .js files within ./dist/ then copy everything (.html) within ./src/views/ to ./dist/views/ then wait for any changes to .ts files, once a .ts file change occurs tsc-watch would rerun the process.
However, tsc-watch somehow detects changes when cp -r ./src/views/ ./dist/views/ is run, despite it not changing any .ts files. This results in an infinite loop when running npm run dev where it compiles the .ts to .js then copies views, detects changes, and loops forever.
It appears a request for exactly what I'm trying to do was requested but shot down for some reason here.
So, with or without tsc-watch, how do I...
Watch for changes to any and all files.
When a change occurs, copy all files from src to dist, compiling any .ts to .js.
Do so with as little overhead as possible and without any infinite loops.
I am using webpack to combine all of my .css, .js and .html into one .html file which gets placed in a SVN directory. It then gets copied to a local server via a copy command. I have my webpack set to --watch so I don't have to consistently re-run the command to get my changes. I am using VS Code.
"wpbuild": "npx webpack --watch & npm run copyFile",
"copyFile": "copy C:\\fromLocation\\file.html C:\\toLocation /y",
Since my --watch doesn't end, the copyFile script never runs. This works if I take out the --watch but that would defeat the purpose of what I am trying to do.
Question: How can I get the file to be copied, after every time that it gets re-created? I want to do this with just one command please.
You could give the package concurrently a shot.
Run multiple commands concurrently. Like npm run watch-js & npm run watch-less but better.
Concurrently would let you do something like this:
"wpbuild": "concurrently \"npx webpack --watch\" \"npm run copyFile\"",
"copyFile": "copy C:\\fromLocation\\file.html C:\\toLocation /y",
If npm run copyFile is able to watch for files, it should be able to create a file whenever one is created, however if it cannot watch for files, it may run before one is created.