Parcel build process and creating files - bundle

I'm using parcel for a vanilla JS project and want to intercept the build process to generate path-based routes kind of like nuxt, gatsby, next etc...
For that I need to intercept the build process, create the routes in a file and stuff, but I tried to follow Parcel Bundler API to no success, besides, I don't know if I'm palcing the file correctly, right know I'm using an index.js as a sibling to package.json and the scripts run parcel index.js.
Could anyone help me figure this out? Thanks.

Related

Why doesn't my website stop loading (Svelte)

I made a portfolio website, but this site doesn't stop loading.
Sorce code is here.
Does anyone have a solution? or the reason why this happens?
Deploy only your bundled static files. I can access your entire svelte project under your domain. check the sources tab in your browser's DevTools.
since you use vercel for deployment, check this out.
https://github.com/vercel/serve
Check for service workers (If you are using them)
But more probably
2) ALWAYS npm run build before firebase deploy

change vue cli create path location on Windows

I am just getting started on Vue.js and I seem to have run into a weirdness I could use some help with. When I creates a new project with the CLI it creates the new project folder in the root of my user folder. This is just plain bad practice. I would not mind putting them into a vue-projects subfolder but would like it even better if I could put them in my c:\inetpup\ folder.
I can't seem to do either. If I specify a path during create I get the following error Error: name can only contain URL-friendly characters. I have tried a number of different formats vue create "vueprojects\helloworld", vue create "vueprojects/helloworld/", vue create ".\vueprojects\helloworld", vue create "c:\inetpub\vueprojects\helloworld" among others. I even true the vue ui but it gives me a JS run time error.
The docs and my Google fu are failing me. Seems like such a simple thing so I am baffled.
Forehead slap. It will create the project in the current folder.
So you have to cd into the folder you want to create the project in and then do your vue create.
Never mentioned in the vue cli guide or the tutorial I am using so one of those many "we assume you already knew it" things that hang us up learning new things.

React app on deployment server

I have an Ubuntu VPS with Laravel v5.6 served with nginx, and I am trying to use React on the front-end. I don't know if this is possible what I want to do is:
use node and npm to build my front-end app locally,
generate the CSS and JS files and upload those already generated files to my VPS server,
the output should not change since as far as I know npm generates at JS and CSS files with your whole code in it
Thanks for the help, and if there is any suggestion for a different approach just let me know.
You should start to use a frontend bundling solution like webpack or parcel, they do exactly the same
If you generate your app with create-react-app it comes with webpack built-in

Using .env constants with Laravel Mix and React

I'm trying to integrate an existing React project with Laravel. I'm using Laravel Mix to compile the assets.
I managed to get everything going, besides one thing: I do not know how to make Mix read constants from the .env file, which are needed for the Webpack build process.
I'm using Firebase, and the various keys are kept in this .env file. Of course i could work around it, but i would like to make it properly.
I do not see anything in the webpack.mix.js file that implies this functionality. How can it be done?
You can prefix your keys with MIX_ and access them via process.env once you recompile your js.
So having mix.js('resources/assets/js/app.js', 'js'); or mix.react('resources/assets/js/app.js', 'js'); will work fine.
You will also need to restart any running watch tasks for changes to take effect.
https://github.com/JeffreyWay/laravel-mix/issues/1096#issuecomment-320328087
https://laravel.com/docs/5.4/mix#environment-variables

Webpack getting started with Laravel. How to setup workflow?

I am currently using Webpack with Laravel to manage dependencies on a new project. My current workflow looks like this:
npm install whatever-package
require('whatever-package'); (in frontend.js)
GulpFile.JS >
elixir(mix => {
//the core scss file. contains bootstrap and vendor stuff.
mix.sass('frontend.scss')
.webpack('frontend.js');
}
run gulp
Frontend.js is then included in my PHP template. This would work great for a single page application, but if I want to have one javascript file, and multiple web pages what technique should I be using to pull in javascript for other pages?
Should I have multiple JS files all webpacked with Elixir? Or what is the next step to require in the right files?
i.e. does Webpack support a single entry point where I can start to load other scripts via data attributes? I've used this technique with requireJS previously, and just trying to wrap my head around the best way to do this with Webpack.

Resources